Styling Fonts and Text - CSS3 Foundations - page 178

Here, you declare an italic font-style for the offer text “All products now have 15% 25% off!” (later in this
chapter you will learn how to put a strike through 15%, showing the discount has increased), but because the font
doesn't have an italic or oblique variant to fall back to, the browser renders an oblique style of its own, as shown in
Figure 11-1.
Figure 11-1 The offer text set in oblique.
font-variant
Initial value: normal | Inherited: Yes | Applies to: All | CSS2.1
Browser support: IE 4+, Firefox 1+, Chrome 1+, Opera 3.5+, Safari 1+
The font-variant property simply takes the values normal or small-caps . By default, the font-vari-
ant is normal . When you set the value to small-caps , the font is changed to a variant that uses small-caps ,
meaning the lowercase letters look similar to the uppercase letters but with smaller proportions.
font-weight
Initial value: normal | Inherited: Yes | Applies to: All | CSS2.1
Browser support: IE 3+, Firefox 1+, Chrome 2+, Opera 3.5+, Safari 1.3+
You use font-weight to change the weight of characters in a font, their degree of blackness, or stroke thickness.
You briefly used this property in Chapter 3 by giving some elements the declaration font-weight: bold; .
You can use these four keyword values: normal , bold , bolder , and lighter . You can also use the values 100
to 900 in 100-point increments that commonly correspond to these weight names:
• 100 —Thin
• 200 —Extra Light (Ultra Light)
• 300 —Light
• 400 —Normal (equivalent of the normal keyword)
• 500 —Medium
• 600 —Semi Bold (Demi Bold)
• 700 —Bold (equivalent of the bold keyword)
• 800 —Extra Bold (Ultra Bold)
• 900 —Black (Heavy)
By using the bolder and lighter keywords, you declare the weight of the font should be bolder or lighter than
the inherited value.