HTML and CSS Reference
In-Depth Information
The following code defines a @font-face for a webpage and implements it for the <p>
elements of the page:
@font-face {
font-family: "My Nicer Font";
src: url('fonts/my_woff_font.eot');
src: url('fonts/my_woff_font.woff');
}
p {
font-family: 'My Nicer Font';
}
First, you add the @font-face keyword to the page, then you give it a name by specifying
the font-family property. Next, you specify where the font can be loaded from. This could be
from the local web server if you downloaded the fonts to it or from an Internet source. In the
previous declaration, both eot and woff types are specified.
After you have decided on a font for your web application, you might decide to resize the
text for different scenarios as you see fit. Of course, the <h1> through <h6> elements pro-
vide some default formatting, but you would not want to use those elements throughout a
website to control the size of the text. Instead you can use the font-size property. The font-size
property accepts relative values that when rendered are relative to the default text size in
the browser. The available values are: xx-small , x-small , small , smaller , medium , larger , large ,
x-large , xx-large . The following code demonstrates setting the font-size for the <p> elements:
p{
font-size: x-large;
}
The application of the size attribute to the font results in the text rendering as shown in
Figure 4-4.The first line of text shows the default size while the bigger text shows the x-large
size.
FIGURE 4-4 The size of the text increases through the use of the font-size attribute
Applying styles to text alignment, spacing, and indentation
CSS3 can also be used to alter text alignment, spacing, and indentation. This provides great
control over positioning text within parent containers.
 
 
Search WWH ::




Custom Search