| The font-family property lets you determine the visual effect of your message by choosing the font for displaying your text (Table 3.2). The font you use to display your text can make a powerful difference in how readers perceive your message (Figure 3.3). Some fonts are easier to read on the screen; others look better when printed. Table 3.2. Font-Family ValuesVALUE | COMPATIBILITY |
|---|
<family-name> | IE3, FF1, S1, O3.5, CSS1 | serif | IE3, FF1, S1, O3.5, CSS1 | sans-serif | IE4/3, FF1, S1, O3.5, CSS1 | cursive | IE4, FF1, S1, O3.5, CSS1 | fantasy | IE4,FF1, S1, O3.5, CSS1 | monospace | IE4,FF1, S1, O3.5, CSS1 |
Figure 3.3. A few common fonts (maybe a little too common!) in 18pt type. 
In this example (Figure 3.4), the level 1 header has been assigned the mono font family using Courier New (for Windows) and Courier as an alternative (for Macs). Figure 3.4. The font for the title, author, and chapter name, and text of the page have all been set, thus overriding the default font set in the body tag. 
To define the font family in a rule: | | 1. | font-family:
Type the property name font-family, followed by a colon (Code 3.1).
Code 3.1. You can specify as many fonts in your definition as you want. Separate names with a comma, and place quotes around font names that contain more than one word.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD  /xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content= "text/html; charset=UTF-8" /> <title>CSS, DHTML & Ajax | Setting the Font</title> <style type="text/css" media="all"> body { font-size: 1.2em; font-family: Georgia, "Times New Roman", times, serif; } h1 { font-family: "Courier New", Courier, "Andale Mono", monospace; } h2 { font-family: Cracked, Impact, fantasy; } p.copy { font-family: Arial, Helvetica, sans-serif; } .author { font-family: Zapfino, "Comic Sans MS", cursive; } </style> </head> <body> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <h2>CHAPTER I<br /> Down the Rabbit-Hole</h2> </div> <p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do...</p> <p >So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid)…</p> <p>There was nothing so <i>very</i> remarkable in that; nor did Alice think it so <i>very< /i> much out of the way to hear the Rabbit say to itself, 'Oh dear! Oh dear! I shall be late!'...</p> </body></html>
|
| 2. | "Courier New"
Type the name of the font you want to use.
| 3. | , Courier, "Andale Mono"
If you want, you can type a list of alternative fonts separated by commas. These fonts will be used (in the order specified) if the previous font in the list is not available on the visitor's computer.
| 4. | , monospace;
After the last comma, type the name of the generic font family for the particular style of font you're using. Table 3.2 lists generic values for font families. Although including this value is optional, doing so is a good idea.
|
 Tips
When you provide a list of fonts, the browser tries to use the first font listed. If that one isn't available to the browser, it works through the list until it encounters a font that is installed on the visitor's computer. If there are no matches, the browser displays the text in the visitor's default font. The advantage of specifying a generic font is that the browser tries to display the text in the same style of font, even if the specific ones you list are not available. Your best strategy for listing fonts is to choose the first one from either the Mac or Windows System Fonts list (see the next section), the second one from the other list, and the final one from the generic font-family values. Fonts that contain a space in their names must be enclosed in quotation marks (example: "Times New Roman"). Theoretically you can download a particular font to the visitor's computer and then specify the font by using the family-name property. However, in practice, this is at best impossible to pull off. See the sidebar "Downloadable Fonts" for details.
Using Browser-Safe Fonts Look around the Web, and what do you see? Two fonts: Arial and Times. Virtually every site whose designers made an effort to control the display of text uses either Times or Arial (or its Mac equivalent, Helvetica). This situation came about for one simple reason: Virtually every computer has these two fonts or some variant of them. I am sick of them. Don't get me wrongthese are great fonts, easy to read at many sizes. But as I said earlier, typography adds a language to text that goes far beyond the written word. Web-based typography is mired in using Times for serif fonts and Helvetica/Arial for sans-serif fonts. This arrangement mutes the power of typography, and all Web pages begin to look the same. What are the alternatives to the "terrible two"? That depends on the computer the person visiting your site is using. Mac and Windows computers have certain standard fonts that should always be installed. In addition, Internet Explorer (which comes installed on most computers these days) installs several additional fonts. Of course, there's no guarantee that these fonts will be installed, but because they came with the operating system and unless they have been removed, they are just as likely to be available as Times, Helvetica, or Arial. Using CSS vs. the Font Tag Other than CSS, the most common way to set a typeface is by using the <font> tag, as follows: <font face="arial,helvetica"> Blah, 'blah, blah</font>
But the <font> tag is on the way out. The most recent versions of the HTML specification from the W3C does not include this tag, noting that fonts should be handled by CSS. There are two basic problems with the <font> tag: You have to add this tag every time you set a font, which can significantly increase file size. If you need to change the font attributes, you have to change the value in every tag.
CSS solves both of these problems by allowing you to redefine how existing tags treat the text they contain, rather than adding more tags, and by allowing you to control these behaviors from a single line in the code. |
I have compiled lists of browser-safe fonts that should be available on each of the different platforms: Apple Macintosh (Table 3.3) Table 3.3. Mac System FontsFONT NAME | STYLES |
|---|
Academy Engraved LET[*] | | American Typewriter | bold | Andale Mono | | Apple Chancery | | Apple Symbols | | Arial | bold, italic, bold italic | Arial Black | | Arial Narrow | bold, italic, bold italic | Arial Rounded MT Bold | | Bank Gothic[*] | bold | Baskerville | bold, italic, bold italic | Big Caslon | | Blackmoor LET[*] | | BlairMdITC TT-Medium[*] | | Bodoni Ornaments ITC TT[*] | | Bodoni SvtyTwo ITC TT-Book[*] | bold, italic | Bodoni SvtyTwo SC ITC TT-Book[*] | bold, italic | Bodoni SvtyTwo OS ITC TT-Book[*] | bold, italic | Bordeaux Roman Bold LET[*] | | Bradley Hand ITC TT[*] | bold | Brush Script MT | | Chalkboard[*] | bold | Cochin[*] | bold, italic, bold italic | Comic Sans MS | bold | Copperplate | bold | Courier | bold | Courier New | bold, italic, bold italic | Didot | bold, italic | Futura | bold | Geneva | | Georgia | bold, italic, bold italic | Gill Sans | bold, italic, bold italic | Handwriting | Dakota | Helvetica | bold | Helvetica Neue | bold, italic, bold italic | Helvetica Neue Black Condensed | | Helvetica Neue Bold Condensed | | Helvetica Neue Light | italic | Helvetica Neue UltraLight | italic | Herculanum | | Hoefler Text | bold, italic, bold italic | Hoefler Text Ornaments | | Impact | | InaiMatha[*] | | Jazz LET[*] | | Lucida Grande | bold | Marker Felt | | Mona Lisa Solid ITC TT[*] | | Monaco | | Optima | bold, italic, bold italic | Palatino | bold, italic, bold italic | Papyrus | | Party LET[*] | | PortagoITC TT[*] | | Princetown LET[*] | | Santa Fe LET[*] | | Savoye LET[*] | | SchoolHouse Cursive B[*] | | SchoolHouse Printed A[*] | | Skia | | Snell Roundhand[*] | bold | Stone Sans ITC TT[*] | | Stone Sans Sem ITC TT[*] | italic | Symbol | | Synchro LET[*] | | Times | bold, italic, bold italic | Times New Roman | bold, italic, bold italic | Trebuchet MS | bold, italic, bold italic | Type Embellishments One LET[*] | | Verdana | | Warnock Pro[*] | bold, italic, bold italic | Warnock Pro Caption[*] | bold, italic, bold italic | Warnock Pro Display[*] | bold, italic, bold italic | Warnock Pro Subhead[*] | bold, italic, bold italic | | | | | | | | | | | | | | | | Verdana | bold, italic, bold italic | Webdings | | Zapf Dingbats | | Zapfino | |
[*] = as of OS 10.4
Microsoft Windows (Table 3.4) Table 3.4. Microsoft Core FontsFONT NAME | STYLES |
|---|
Andale Mono[*] | | Arial | bold, italic, bold italic | Arial Black | | Comic Sans MS | bold | Courier New | | Georgia | bold, bold italic, italic | Impact | | Times New Roman | bold, italic, bold italic | Trebuchet MS | bold, bold italic, italic | Verdana | bold, bold italic, italic | Webdings | |
[*] Previously named Monotype.com
Microsoft Core Fonts (Table 3.5) are installed with Internet Explorer for both Windows and Mac Table 3.5. Windows System FontsFONT NAME | STYLES |
|---|
Arial | bold, italic, bold italic | Arial Black | | Calibri[*] | bold, italic, bold italic | Cambria[*] | bold, italic, bold italic | Candara[*] | bold, italic, bold italic | Comic Sans MS | bold | Consolas[*] | bold, italic, bold italic | Constantia[*] | bold, italic, bold italic | Corbel[*] | bold, italic, bold italic | Courier New | bold, bold italic, italic | Franklin Gothic Medium | italic | Georgia | bold, bold italic, italic | Impact | | Lucida Console | | Lucida Sans Unicode | | Palatino Linotype | bold, bold italic, italic | Symbol | | Tahoma | bold | Times New Roman | bold, bold italic, italic | Trebuchet MS | bold, bold italic, italic | Verdana | bold, bold italic, italic | Webdings | | Wingdings | |
[*] = as of Windows Vista
As you can see, there are certainly more than two choices. This book's Web site (webbedenvironments.com/css_dhtml_ajax) also lists these fonts, and includes examples of what they should look like and which similar-looking fonts can be used as replacements. Tips For more details on Mac fonts, see developer.apple.com/textfonts/. For more details on Windows fonts, see microsoft.com/typography/fonts/. Although these fonts have been listed for Web development, they can be used for any type of document (a presentation, a word-processor document, or whatever) that is being transferred between computer platforms.
|
