Cascading Style Sheets: The Definitive Guide, Second Edition

The font Property

All of these properties are very sophisticated, of course, but using them all could start to get a little tedious:

h1 {font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 30px; 
   font-weight: 900; font-style: italic; font-variant: small-caps;}
h2 {font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 24px;
   font-weight: bold; font-style: italic; font-variant: normal;}

Some of this could be solved by grouping selectors, but wouldn’t it be easier to combine everything into a single property? Enter font, which is the shorthand property for all the other font properties (and a little more besides).

font

Values

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

Initial value

refer to individual properties

Applies to

all elements

Inherited

yes

Percentages

calculated with respect to the parent element for <font-size> and with respect to the element’s <font-size> for <line-height>

Computed value:

see individual properties (font-style, etc.)

Generally speaking, a font declaration can have any one value from each of the listed font properties, or else a “system font” value (described in the Section 5.6.3). Therefore, the preceding example could be shortened as follows:

h1 {font: italic 900 small-caps 30px Verdana, Helvetica, Arial, sans-serif;}
h2 {font: bold normal italic 24px Verdana, Helvetica, Arial, sans-serif;}

and have exactly the same effect ...