| Although you can set font properties independently, it is often useful, not to mention more concise, to put all font elements in a single declaration (Table 3.10). To do this, you use the shorthand font property. Table 3.10. Font ValuesVALUE | COMPATIBILITY |
|---|
<font-style> | IE3, FF1, S1, O3.5, CSS1 | <font-variant> | IE4, FF1, S1, O3.5, CSS1 | <font-weight> | IE3, FF1, S1, O3.5, CSS1 | <font-size> | IE3, FF1, S1, O3.5, CSS1 | <line-height> | IE3, FF1, S1, O3.5, CSS1 | <font-family> | IE3, FF1, S1, O3.5, CSS1 | visitor styles | IE4/5.5, S2, O6, CSS2 |
This example (Figure 3.13) shows a level 1 heading tag being defined, along with a class called copy that will be applied to paragraphs of text. In addition, the author's name is defined with the shorthand font style (see the sidebar "Mimicking the Visitor's Styles"). Figure 3.13. You can set all the font properties (and the line height discussed in Chapter 4) in a single definition and even instruct the page to use styles defined by the visitor's computer. 
To define several font attributes simultaneously in a rule: | | 1. | font:
Type the property name font (Code 3.6), followed by a colon (:). Then type the values in same order that they are typed in the remaining steps of this exercise.
Code 3.6. The h1 tag explicitly sets all of the font properties, while the author sets a user style value to mimic the caption style.| [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 Multiple Font Values</title> <style type="text/css" media="all"> body { font: normal normal normal 1.2em/1.3em Arial, Helvetica, Geneva, sans-serif; } h1 { font: bold italic small-caps xx large/110% "Minion Web", Georgia, "Times New Roman", Times, serif; } h2 { font: x-large Cracked, Impact, fantasy; } .author { font: icon; } p.copy { font: .9em/1.8em "Times New Roman", times, serif ; } </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…</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. | italic
Type a font-style value, followed by a space (see "Making Text Italic" earlier in this chapter).
| 3. | small-caps
Type a font-variant value, followed by a space (see the previous section, "Creating Small Caps").
| 4. | bold
Type a font-weight value, followed by a space (see "Setting Bold, Bolder, Boldest" earlier in this chapter).
| 5. | xx-large
Type a font-size value (see "Setting the Font Size" earlier in this chapter).
| | | 6. | /110%
Type a forward slash (/), a line-height value, and a space (see "Adjusting Text Spacing" in Chapter 4).
| 7. | 'minion web', Georgia, 'Times New Roman', Times, serif;
Type a font-family value and closing semicolon (refer to "Setting the Font" earlier in this chapter).
|
 Tips
If you don't want to set a particular value in the list, just leave it out. The browser will use its default value instead. If you need to override a value set by the font shorthand property, it's generally best to use the full property (such as font-style, font-varient, font-weight, and font-family). The font shorthand property is a real time-saver, and I try to use it as often as possible. WYSIWYG programs such as GoLive and Dreamweaver, however, tend to default to using the individual properties.
Mimicking the Visitor's Styles Wouldn't it be nice if you could match your visitor's system font styles? You can do this by simply declaring the font style to be one of the following keywords (for example, font: icon;): caption: the font style being used by controls, such as buttons icon: the font style being used to label icons menu: the font style being used in drop-down menus and menu lists message-box: the font style being used in dialog boxes small-caption: the font style being used for labeling small controls status-bar: the font style being used in the window's status bar
|
Downloadable Fonts The Holy Grail of Web-based typography is downloadable fonts. Imagine if, rather than having to rely on the limited list of browser-safe fonts or having to create graphics just to get the typeface you want to use, you could send the font to the visitor's computer automatically. Actually, the CSS Level 2 standard allows for downloadable fonts, so why don't we see downloaded fonts all over the Web? There are several impediments to simple font delivery: Many fonts are not free. There is some concern among font creators that they will not be compensated if their fonts are distributed over the Web. This assumes that users can download and reuse fonts without having to pay for them. Windows and Mac fonts are incompatible. You would have to include versions for both platforms. Font files can be quite large and, thus, take a while to download.
Netscape and Microsoft introduced schemes to overcome these problems and allow font downloading for Web pages. The problem is that you can't simply queue a font like a graphic and have it download. Instead, you have to process the font for the Web. Unfortunately, Netscape and Microsoft came up with incompatiblenot to mention difficultsystems for creating downloadable fonts. For Internet Explorer, you have to convert your fonts to .eot format, using a program called WEFT (microsoft.com/typography/web/embedding/). This program, however, is Windows-only software. For Netscape, you have to purchase software from Bitstream to convert your fonts to TrueDoc format (truedoc.com). According to Bitstream, this format works in both Netscape and Internet Explorer, but is extremely buggy. On the distant horizon, CSS3 promises to sort out the font download problems. But, as I discussed in Chapter 1, that may be a long time in coming. |
|
