HTML and CSS Reference
Table 4-1. CSS2.1 Font Properties
Sets the font and fallback options
Sets the size of the font
Controls the display of italic
Controls the display of small caps
Determines whether the text
should be bold
Sets the vertical distance between
lines of text (leading)
Shorthand property that combines
all the others in a single declaration
■ The properties in Table 4-1 are supported by all browsers. The draft CSS3 Fonts module introduces others,
which have varying degrees of support. They're the subject of the next chapter.
Using font-family to Choose a Range of Alternative Fonts
As a designer, you're likely to have lots of fonts on your computer, but visitors to the sites you design probably
won't have half as many. The fonts installed on a computer depend on both the operating system and any
other programs that have been installed. If you choose an unusual font for your page, in all likelihood, few of
your visitors will ever see the page the way you envisaged. Consequently, you should always choose several
alternatives similar in design and proportions to your preferred choice.
he font-family property takes as its value a comma-separated list of fonts like this:
font-family: Arial, Helvetica, sans-serif;
If any of the font names contain spaces, they must be wrapped in quotes like this:
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
it doesn't matter whether you use single or double quotation marks, but the comma must go outside the
The browser attempts to display the first available font in the list. In the case of the previous example,
the browser tries Arial if Trebuchet MS isn't available on the visitor's computer. If Arial's not available, it tries
Helvetica. And if none of the fonts is available, it falls back to the computer's default sans-serif font.
Listing fonts in the font-family property is known as creating a font stack . You should always end your font
stack with one of the generic font families in Table 4-2 .