Typography - Pro CSS Techniques - page 194

This type classification is rarely practical for web use. See Figure 9-5 for a fantasy font
example.
Figure 9-5. Herculanum, a fantasy typeface included wih Mac OS X
Typeface Selection with CSS
CSS provides two ways to select typefaces for an element: generic font families and specific
typeface families.
Using Generic Font Families
Using a generic font family in your (X)HTML document is a simple matter of assigning its
associate value to the font-family attribute:
p {
font-family: serif;
}
The user agent will choose a serif typeface and apply it to the selection (in this case, the para-
graph element).
Using a Specific Typeface
Most often, designers will want a bit more control than generic font families offer. The same
font-family property can also be used to specify a particular typeface, like so:
h1 {
font-family: Arial;
}
h2 {
font-family: 'Times New Roman';
}
The user agent will then display all h1 elements in Arial and all h2 elements in Times New
Roman, if they are available to the user agent.
Note that typeface names that contain one or more spaces (such Times New Roman or
Trebuchet MS) should be enclosed in quotation marks (single or double—both are acceptable),
as should any font that contains symbols (such as % or #) in its name.
If the specified typeface is not available, the user agent will resort to using its default font
(which can often be adjusted by the user in the agent's preferences or settings area).
The designer can also provide a comma-separated list of typefaces in the order of prefer-
ence. The user agent will use the first one available to it. Here's an example:
code {
font-family: Monaco, 'Courier New', Courier;
}