246996016-HTML5-Step-by-Step

Specifying a Font Family 105
Note In the preceding example, the Cursive font does not appear as you might expect from its
name; it doesn’t look like cursive handwriting. In most browsers, cursive appears as a rounded
version of sans-serif.
By specifying a generic font type as the final font in the family, you can virtually guarantee
that you’ll at least get your last choice. If the browser can’t use any of your preferences,
it will simply render the text using its default font. Here are some common font
families, grouped by their similar appearances:
●
●
●
●
●
●
●
●
Arial Black, Helvetica Bold
Arial, Helvetica, sans-serif
Verdana, Geneva, Arial, Helvetica, sans-serif
Times New Roman, Times, serif
Courier New, Courier, monospace
Georgia, Times New Roman, Times, serif
Zapf-Chancery, cursive
Western, fantasy
You can also add a font-family attribute to individual tags to ensure that the text stands
out. Here’s how you might set an individual paragraph to the second font family from the
preceding list.
Notice that there are no quotation marks around any of the font names when applied in
this way. Instead, the quotation marks are placed around the entire style rule.
In this exercise, you will assign a default font to all the tags in a document, and then
you’ll override that font choice on a specific paragraph.
SET UP Use the index.htm and default.css files in the practice folder for this topic.
These files are located in the Documents\Microsoft Press\HTML5 SBS\07Text\
SelectingFont folder. Open the default.css style sheet file in Notepad and open the
index file in Internet Explorer.
1. In the default.css style sheet, add a style rule that defines a font family of Verdana,
Arial, Helvetica, and sans-serif for the tag and the tag, as shown in the
following:
p, li {font-family: "Verdana", "Arial", "Helvetica", sans-serif}
2. Save the file, and then refresh the Internet Explorer display.
The font of all the text in paragraphs and lists changes.