However, the reality is that the
browser makers have not chosen to take advantage of the concept
STYLIN??™ FONTS AND TEXT 83
of many different weights of text, which is a shame. There??™s room for
improvement here, as the results show.
FIGURE 3.11A
Firefox Windows
FIGURE 3.11B
Safari Mac
FIGURE 3.11C
IE6 Windows
FIGURE 3.11D
Firefox Mac
Font-Variant Property
Example: blockquote {font-variant:small-caps;}
Values: small-caps, normal
This property accepts just one value (besides normal), and that is
small-caps. This causes all lowercase letters to be set in small caps,
like this
h3 {font-variant:small-caps;}
The code above produces the result in Figure 3.12.
FIGURE 3.12 Two paragraphs, one
styled in small caps.
I often use small-caps with the :?¬? rst-line pseudo-class (even IE6
supports it), which allows you to specify a style for the ?¬? rst line of an
element. Typically, you would use it on a paragraph (see Chapter 2).
Again, use this styling sparingly because text in all uppercase is
harder to read because it lacks the visual cues provided by the
ascenders and descenders of lowercase type.
STYLIN??™ WITH CSS - CHAPTER 3 84
The Font Property Shorthand
Example: p {font: bold italic small-caps .75em verdana,
arial, sans-serif;}
Here's a piece of text loaded up with every possible font
property.
The code above produces the result in Figure 3.
Pages:
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126