HTML and CSS Reference
In-Depth Information
and bold italic versions in a range of sizes. Each of these variants is actually a distinct font—“12 point
Times New Roman bold” is one font within the Times New Roman font family. These days, the terms
“font,” “typeface,” and “font family” are often used interchangeably.
In CSS, a font family is declared using the
font-family
property, followed by a comma-separated list of
your desired typefaces, in order of preference. When a browser renders the page, it looks on the user's
computer system for the first listed font family. If it doesn't find that one, it will continue to the next, and so
on until it finds a font in the stack that your visitor has installed. If it doesn't find any, the browser will simply
fall back on its default typeface.
Listing 4-45 shows an example of a CSS style rule declaring a sequence of font families for the body
element.
Listing 4-45.
Declaring a font family
body {
font-family: Georgia, "Times New Roman", Times, serif;
}
The typeface Times New Roman has a name that includes spaces, so its name appears
in quotation marks to group those words together. Font families with single-word names
don't require quotes.
One very important aspect of CSS is the concept of
inheritance
. The values of some properties in CSS can
be passed down from an ancestor element to its descendant elements, including most font-related
properties. Because every element on the page is descended from the
body
element, they will all inherit
their font styles from that common ancestor, without the need to re-declare the same styles over and over.
You can then override or alter this base font family for different elements elsewhere in your style sheet.
Revisiting the style rule for the
body
element, perhaps you've decided you'd prefer a
sans serif
typeface,
such as Calibri. Although Calibri is fairly common, not every computer has it installed. If the browser
doesn't find Calibri the next best choice might be Helvetica, and if your reader doesn't have Helvetica
installed, you might grudgingly accept Arial as a last resort. If your reader has none of these fonts, then
you'd at least like the text to be drawn in
some
kind of sans serif typeface, so you should end with the
generic family name,
sans-serif
(the phrase “sans serif” must be hyphenated in CSS). Listing 4-46
shows the revised rule.
Listing 4-46.
The updated font-family declaration, now with sans serif typefaces
body {
font-family: Calibri, Helvetica, Arial, sans-serif;
}
You can see a “before and after” view of a sample web page in Figure 4-33. The left side shows the text in
the default browser font (Times, in this case), and the right shows the same text in Calibri after the new
CSS has been applied.
