The Font-Style Property

The font-style property lets you specify an oblique or italic style within the current type family.

Name:	font-style
Value:	normal | italic | oblique
Initial:	normal
Applies to:	all elements
Inherited:	yes
Percentages:	N/A

This property has three keyword values:

• normal The normal style of the font (often known as "roman," "regular," or sometimes "upright"). This is the default value.

• italic.

• oblique.

Italic and oblique styles are similar, but not the same. Sans serif families usually consider the two to be the same. Both are a variant that looks slanted to the right. For some families, that is how they are produced: by mechanically slanting the roman letters. Usually, however, that doesn't lead to beautiful letters, and for most fonts, the italic and roman forms are designed separately.

Serif families usually distinguish between the two. The italic form looks different from the oblique form. The two differ in the shape of their serifs and often look like completely different letter forms. Oblique refers to a version that looks like slanted roman. Oblique serif fonts are rare. Figure 5.13 compares roman, oblique, and italic style.

Figure 5.13. Sans serif roman, oblique, and italic (top); serif roman, oblique, and italic (bottom).

Font designers have used all kinds of names for their fonts without much consistency. Two other names that usually refer to what we described as oblique are inclined and slanted. Fonts with "Oblique," "inclined," or "Slanted" in their names are usually labeled "oblique" in a browser's font database and are selected by the oblique value. Other names that usually refer to what we described as italic are cursive and kursiv. Fonts with "Italic," "Cursive," or "Kursiv" in their names are usually labeled "italic" in a browser's font database and are selected by the italic value.

If a type family has only an oblique style font, that font will be used as the italic as well. However, if you ask for oblique and the family has only an italic variant, you won't get the italic as a substitute for the oblique. Instead, the next family in the list is tried to see if it contains an oblique variant.

Here are example rules using the font-style property:

 H1, H2, H3 { font-style: italic } P { font-style: oblique } H1 EM { font-style: oblique }