8.5. The font Shorthand Property

This shorthand property allows you to set multiple font-related properties in one CSS style rule.

As with other CSS shorthand properties we've seen, values are separated from one another by spaces, with commas used in multiple-property situations such as the font-family. Here's an example of a reasonably complex font description in CSS:

h3 {
  font: bolder small-caps 22px Arial, "Lucida Console", sans-serif;
}

Notice that the font size (22px) and the font-family list are included in the definition of the style in sequence at the end of the list of properties. You must always include at least the font-size and the font-family property values, in that order, as the final or only values in the font shorthand property.

The above CSS rule produces the output shown in Figure 8-5.

Figure 8-5. Heading Produced by Style Rule Calling for 22-Pixel Bolder Small-Caps Font

There are a couple of intriguing subtleties in the use of the font shorthand property that are worth noting. First, you can add a line-height property to the font declaration by placing a forward slash (/) after the setting for the font size, followed by an additional valid size or number. We'll cover line-height in greater detail in Chapter 9. Here's an example:

p {
  font: small-caps 12px/2em Arial, "Lucida Console", sans-serif;
}

The bold type in the above code fragment instructs the browser to render paragraph text in a 12 pixel high font and to set the line height to double the height of the font. Figure 8-6 shows what a paragraph looks like without the added line-height value. Figure 8-7 shows what it looks like when I add the 2 ems of line height.

Figure 8-6. Font Without Line Spacing Addition

Figure 8-7. Same Text as Figure 8-6 with 2em Line Height Property Value

CSS2 introduces the concept of a font constant that you can use when you're creating user interfaces and want to match user expectations based on their browser and operating system. Theoretically, these constants will use the font defined by the browser and/or operating system as the base font from which to create the appearance of the text to which they are applied. These constant values may be assigned to the font shorthand property, as they represent a particular combination of values for all of the font properties. The constants are:

• caption

• icon

• menu

• message-box

• small-caption

• status-bar

Before you make heavy use of this feature, you'll want to check the browser compatibility information in Appendix B, as not all browsers support these constants.