Styling Text - Beginning CSS3 - page 49

Table 4-1. CSS2.1 Font Properties

Property Initial Value Inherited Description

font-family Yes Sets the font and fallback options

font-size medium Yes Sets the size of the font

font-style normal

Yes Controls the display of italic

font-variant normal Yes Controls the display of small caps

font-weight normal Yes Determines whether the text

should be bold

line-height normal Yes Sets the vertical distance between

lines of text (leading)

font

Yes 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.

Note

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;

■ Note it doesn't matter whether you use single or double quotation marks, but the comma must go outside the

quotes.

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 .