The Font Property


The font property lets you specify, in one action, all the other font properties previously described plus line-height (which we discuss in Chapter 7, "Space Inside Boxes").

Name:

font

Value:

[[ <font-style> | | <font-variant> | | <font-weight> ]? <font-size> [/ <line-height> ]? <font-family> ] | caption | icon | menu | message-box | small-caption | status-bar

Initial:

see individual properties

Applies to:

all elements

Inherited:

yes

Percentages:

allowed on <font-size> and <line-height> only


The font property is the first of the so-called shorthand properties we describe in detail. Shorthand properties let you set a group of properties that naturally belong together. The font properties described in this chapter (font-style, font-variant, font-weight, font-size, and font-family) form one such group, and the font property sets all of them in one statement. Also, the line-height property (described in Chapter 7) is set by the font property, but note that font-stretch and font-size-adjust (described next) are not included in this group because they were added in CSS2.

The font property is one of the most common CSS properties, and a simple example of its use was given in Chapter 2. Here is another example:

H1 { font: 1.3em sans-serif }

The font property requires that you always specify a font size and a font family; all other values are optional. The previous example is equivalent to writing the following:

 H1 {   font-style: normal;   font-weight: normal;   font-variant: normal;   font-size: 1.3em;   line-height: normal;   font-family: sans-serif; }

Except for font-size and font-family, all properties in this example are set to their initial values. Because the browser does this automatically, it is normally not necessary to set them. Still, if you write your style sheets "by hand," using a normal text editor rather than a dedicated tool, you may appreciate the brevity of shorthand properties.

In principle, all values that are legal on the individual properties are also legal on the font property. There are restrictions, however, on the order the values must come in. First comes the font-style, font-weight, and font-variant values, in any order. These are optional and are set to their initial values if they are omitted. Then comes the font-size value, which is required. It may optionally be followed by a "/" and a line-height value. Finally comes the font-family value, which is required.

The syntax resembles a shorthand common in traditional typography (for example, "12/14 Times bold italic"). Here is an example of how to write a rule that reflects this shorthand:

P { font: italic bold normal 12pt/14pt Times, serif }

For demonstration purposes, we set every property, including font-variant, which has its initial value of normal. Specifying initial values is not necessary. The browser automatically uses the initial values for those properties not explicitly set. For example:

P { font: italic bold large palatino, serif }

This sets all properties except font-variant and line-height, whose initial values will be used. In other words, it is equivalent to the following set of rules:

 P {   font-style: italic;   font-weight: bold;   font-variant: normal; /* default */   font-size: large;   line-height: normal; /* default */   font-family: palatino, serif; }

Here are some more examples:

 P { font: italic 12pt/14pt bodoni, bembo, serif } P { font: normal small-caps 120%/120% fantasy } P { font: x-large/100% "new century schoolbook", serif } P { font: message-box }

The keyword message-box in the last rule refers to the font used in user interface dialog boxes. The rule sets all six properties to the values used in dialog boxes. The system font keywords are

  • caption The font used for captioned controls (for example, buttons, drop-downs, etc.).

  • icon The font used to label icons.

  • menu The font used in menus (for example, dropdown menus and menu lists).

  • message-box The font used in dialog boxes.

  • small-caption The font used for labeling small controls.

  • status-bar The font used in window status bars.

System fonts may only be set as a whole; that is, the font family, size, weight, style, etc., are all set at the same time. These values may then be altered individually. For example;

 BODY { font: message-box;   font-size: x-large }



Cascading Style Sheets(c) Designing for the Web
Cascading Style Sheets: Designing for the Web (3rd Edition)
ISBN: 0321193121
EAN: 2147483647
Year: 2003
Pages: 215

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net