CSS3 for Mobile - Learn HTML5 and JavaScript for Android - page 129

The following code example shows a full declaration of how to use @font-face .
@font-face {
font-family: "My Font With Spaces";
src: local("My Font With Spaces"),
url("/path/to/fonts/my-font-with-spaces.woff") format("woff"),
url("/path/to/fonts/my-font-with-spaces.eot") format("embedded-opentype"),
url("/path/to/fonts/my-font-with-spaces.svg") format("svg"),
url("/path/to/fonts/my-font-with-spaces.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
text-shadow and text-stroke
text-shadow allows you to create varying amounts of shadow behind text using
CSS. text-stroke allows you to draw an outline on the inside edge of text.
text-shadow and text-stroke can also be used on @font-face typefaces.
To create a basic shadow around text, you simply need to add the text-shadow
property to your CSS. The property accepts the following values and format.
text-shadow: horizontal-offset vertical-offset blur color;
For instance, the following CSS style will produce results similar to that shown in
Figure 5-7.
h1 {
text-shadow: 10px 10px 10px #000000;
}
You can also use negative numbers for the shadow's position. This will offset
the shadow to the left for the horizontal offset, and toward the top for the
vertical offset.
You define the text-stroke property by specifying the stroke width in pixels and
its color. The text-stroke property accepts the following values with the
following format.
text-stroke: width color;
It is used in much the same way as text-shadow , as shown in the next code
snippet.
h1 {
text-stroke: 1px #000000;
}