Beginning CSS: Cascading Style Sheets for Web Design, Third Edition

5

Applying Font Faces

WHAT YOU WILL LEARN IN THIS CHAPTER:

• 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
• The font-variant property 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

In Chapter 4, you learned how certain properties in CSS are inherited and how the cascade determines which style rules are the most important. In this and subsequent chapters, you begin an in-depth look at the individual properties of CSS and how these come together to style a document.

This chapter begins 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.

SETTING FONT FACES

The font-family property allows you to specify the typeface used to display a piece of text. You can specify more than one typeface, and the first one that the user has installed on their system will be the one used. You can make use of any of the fonts installed on the user's operating system, though in practice you'll generally stick to the set of web safe fonts that we discuss later in the chapter. There are also some so-called generic font ...