Chapter 6. Fonts

Chapter 5 presented a variety of text manipulation properties. This chapter continues the discussion of text manipulation with CSS's font manipulation properties. CSS includes a variety of properties that change the face, size, and style of a font. This chapter covers:

  • The font-family property and how it is used to change the face of a font

  • The font-style property and how it is used to make a font italic or oblique

  • The font-variant property, a property similar to the text-transform property presented in Chapter 5, and how this property is used to create a small-caps effect

  • The font-weight property and how it is used to increase or decrease how bold or light a font appears

  • The font-size property and how it is used to increase or decrease the size of a font

  • The font property and how it is used as shorthand to specify a number of other font properties

I begin the discussion of CSS's font properties with the font-family property.

Specifying Fonts with the font-family Property

The font-family property is used to specify fonts. The following table outlines the font-family property and the values that it allows.




[[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ]

Initial value: Varies depending on the browser or user agent.

Figure 6-1a is an example of the basic use of the font-family property.

Figure 6-1a

Figure 6-1a. Figure 6-1a

The rules in Figure ...

Get Beginning CSS: Cascading Style Sheets for Web Design, Second Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.