The CSS Font Attribute

Once again, this is a composite attribute used to assign the (in the wordprocessing sense) font, its size, style and weight. The assignment determines the manner in which text within the element is drawn. If em-sizing is used this specification will also influence the layout of all contained elements. The sub-attributes are

• font-family:value where value is a font name. If the name has spaces, e.g. Times New Roman or Comic Sans MS, it should be wrapped in quotes. In practice, all browsers handle non quoted names without a hiccup. However, your webpage will fail validation tests.
• font-size:value is used to specify the font size. Any legal CSS units of measurement can be used. We recommend em units.
• font-style: where values : values is a combination of - none, oblique or italic. In practice the utility of this attribute is mostly limited to italicizing text.
• font-weight:value : The CSS 3 standard defines a whole host of numerical values for this attribute. However, most browsers do a very poor job of correctly interpreting these values - at least in part owing to constraints imposed by the font. Therefore, it is best to assume that it takes one of only two values - normal and bold.

The shorthand font attribute setting bears the form

Needless to say, in shorthand mode all font names that contain spaces should be wrapped in quotes. Unlike with other shorthand properties browsers are very picky about the order of sub-attributes here. The alternatives acceptable to all three browsers discussed in these pages are listed below

• font:font-weight font-style font-size font-family
• font:font-style font-weight font-size font-family
• font:font-style font-size font-family
• font:font-weight font-size font-family
• font:font-size font-family

Any other combination will be treated as being erroneous.

These attributes are inherited - i.e. in a child element, if not assigned, the corresponding values in the parent container are used.