The font Property

The font property can be used in two ways — as a shorthand property or as a regular property. In CSS, a shorthand property is one that that takes the values of several other CSS properties. Each of the values are separated by spaces or sometimes the forward slash character (/). Shorthand properties make CSS rules less verbose and more readable.

font as a shorthand property

Here is the syntax of font as a shorthand property:

font: font-style font-variant font-weight font-size/line-height font-family

The order of the values of the first three sub-properties — font-style, font-variant, and font-weight is not important. Therefore, font: italic small-caps bold 18px Arial; is the same as font: bold italic small-caps 18px Arial;

If any of the values of font-style, font-variant, and font-weight are omitted in a font declaration, the browsers assigns them the value normal. For example:

font: normal normal bold 18px Arial; is the same as font: bold 18px Arial;.

The values of the font-size and the font-family properties must be specified in the correct order - font-size first and font-family next. If they are omitted or the order is changed, the entire declaration is invalid and will be ignored by the browser. Therefore, the smallest valid font declaration will have only the font size and the font family specified. Example:

font: 18px Arial;

Note that the values font-style, font-variant, and font-weight have to appear before the font-size and the font-family values. Therefore, the following font declaration is invalid. font: 35px Verdana italic small-caps bold

Line height can also be specified using the font shorthand property. The value of line height is specified after the font size and is separated from it by a forward slash.

Example 1: font: 32px/1.5em Arial; Example 2: font: italic 2em/1.2 Verdana;

If line height is not specified, then the browser assigns the value normal to it.

Inheritance

The values of the properties of font are inherited by child elements.

font as a regular property

Here is the syntax of font when used as a regular property:
font: caption icon menu message-box small-caption status-bar inherit
The values caption, icon, menu, message-box, small-caption, and status-bar refer to the fonts used by the operating system (that the browser is running in) for certain interface elements. These are called system fonts. Thus, the font style, font variant, font weight, font size and font family of an operating system element can be applied to any (x)html element. Example: p { font: caption; }

font:caption

According to the w3.org specification for the font property, the value caption refers to the font used by the captions of control elements of the operating system. Examples of control elements are buttons, drop-down menus etc. This property is useful when one needs to make the (x)html elements appear similar to the buttons, drop-down menus, tabs, etc. of the user's operating system . The font:caption declaration can be used on any (X)HTML element.

Browser Support

Firefox 3 correctly assigns Windows XP's caption font to elements with the font:caption property. Internet Explorer 6, Internet Explorer 7 and Opera 9.6 incorrectly assigns Windows XP's title bar font to elements with the font:caption property. Safari 3.2.2 incorrectly assigns the font Lucida Grande at size 13px to elements with the caption property.

font:icon

According to the w3.org specification for the font property, the value icon refers to the font used for labeling icons. This property is useful when one needs to make (X)HTML elements appear similar to the user's operating system's icons. This property can be used on any (X)HTML element. Example: font: icon;

Browser Support

Firefox 3, Internet Explorer 6, Internet Explorer 7 and Opera 9.6 assign the correct font to the icon property. Safari 3.2.2 incorrectly assigns Lucida Grande 13px to it.

font: menu

According to the w3.org specification for the font property, the value menu refers to the font used in menus such as drop-down menus and menu lists. This property is useful when one needs to make (X)HTML menus appear similar to the user's operating system's menus. This property can be used on any (X)HTML element.
Example: font: menu;

Browser Support

Firefox 3, Internet Explorer 6, Internet Explorer 7 and Opera 9.6 assign the correct font to the icon property. Safari 3.2.2 incorrectly assigns Lucida Grande 13px to it.

font: message-box

According to the w3.org specification for the font property, the value message-box refers to the font used in dialog boxes of the user's operating system. This property is useful when one needs to make web page dialog boxes appear similar to the user's operating system's dialog boxes. This property can be used on any (X)HTML element. Example: font: message-box;

Browser Support

Firefox 3, Internet Explorer 6, Internet Explorer 7 and Opera 9.6 assign the correct font to the icon property. Safari 3.2.2 incorrectly assigns Lucida Grande 13px to it.

font: small-caption

According to the w3.org specification for the font property, the value small-caption refers to the font used for labelling "small controls" of the user's operating system. It is not clear exactly what "small controls" are. Windows XP does not appear to have "small controls". The w3.org specification states that when small captions don't exist in an operating system, a smaller version of the caption font must be selected by the browser for the small-caption font. This property can be used on any (X)HTML element.
Example: font: message-box;

Browser Support

Since Windows XP doesn't appear to have small captions, the browser is supposed to choose a font smaller than caption. Firefox 3, Internet Explorer 6, Internet Explorer 7 and Opera 9.6 assign an incorrect font to the small-caption property in Windows XP — they just use the boldface version of the caption font. Safari 3.2.2 also incorrectly assigns Lucida Grande 11px to the small-caption property.

font: status-bar

According to the w3.org specification for the font property, the value status-bar refers to the font used in windows status bars of the user's operating system. This property is useful when one needs to make a web page element appear similar to the user's operating system's status bar. This property can be used on any (X)HTML element.
Example: font: status-bar;

Browser Support

Firefox 3, Internet Explorer 6, Internet Explorer 7 and Opera 9.6 assign the correct font to the status-bar property. Safari 3.2.2 incorrectly always assigns Lucida Grande 10px to it regardless of the font used by the operating system.

font: inherit

This w3 document states that The inherit value can be used to strengthen inherited values. Here is one way of doing this: p { font: inherit !important }
The above rule ensures that p elements' fonts are always inherited and can never be changed by any other CSS rule.

Browser Support

Firefox 3, Opera 9.6 and Safari 3.2.2 fully support the inherit value for font. Internet Explorer 6 and Internet Explorer 7 don't support the inherit value at all.

Font properties specified by system font values

In Firefox 3, Opera 9.6 and Safari 3.2.2, the system font values of font (caption, icon etc.) specify all the major font properties font-style, font-variant, font-weight, font-size, line-height, and font-family. In Internet Explorer 6 and Internet Explorer 7, the system font values of font only specify font-style, font-weight, font-size, and font-family. The properties font-variant and line-height are inherited even when the system font values are applied to an element.