rs79.vrx.palo-alto.ca.us
inheritance
mandatory
optional
stretch
system
warning
The CSS FONT shorthand is braindead
When you're tired of it not working, read this

The font property in CSS is a shorthand property that combines all the following sub-properties in a single declaration. 

body {
  font: normal small-caps normal 16px/1.4 Georgia;
}

/* is the same as:

body {
  font-family: Georgia;
  line-height: 1.4;
  font-weight: normal;
  font-stretch: normal;
  font-variant: small-caps;
  font-size: 16px;
}
 */
There are seven font sub-properties, including:

font-stretch

sets the font width

  • normal
  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded
font-style

italicised or oblique.

  • normal
  • italic
  • oblique
  • inherit
font-variant

display as small caps.

  • normal
  • small-caps
  • inherit
font-weight

sets the weight

  • normal
  • bold
  • bolder
  • lighter
  • 100, 200, 300, 400, 500, 600, 700, 800, 900
  • inherit
font-size

sets the height

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
  • smaller, larger
  • percentage
  • inherit
line-height

defines the amount of space above and below inline elements.

  • normal
  • number (font-size multiplier)
  • percentage
font-family

Font face

  • sans-serif
  • serif
  • monospace
  • cursive
  • fantasy
  • caption
  • icon
  • menu
  • message-box
  • small-caption
  • status-bar
  • "string"

Mandatory

Two of the values in font shorthand are mandatory: font-size and font-family. If either of these is not included, the entire declaration will be ignored.

Also, font-family must be declared last of all values, otherwise, again, the entire declaration will be ignored.


Optional

All five of the other values are optional. If you include any of font-style, font-variant, and font-weight, they must come before font-size in the declaration. If they aren't, they will be ignored and may also cause the mandatory values to be ignored.

Stretch

The font-stretch property is new in CSS3 so if it is used in an older browser that doesn't support font-stretch in font shorthand, it will cause the entire line to be ignored.

The spec recommends including a fallback without font-stretch


Inheritance

If you omit any of the optional values (including line-height), the omitted optionals will not inherit values from their parent element, as is often the case with typographical properties. Instead, they will be reset to their initial state.

A classic case, say you want italic to be in Garamond Italic. You have to specify the Font-Size in the Font command but you may not know what the size actually is. That's why there's keywords like Larger and Smaller among many others. I found Inherit doesn't work for font size and had to use this:

System

In addition to the above syntax, the font property also allows use of keywords as values. They are:
  • caption
  • icon
  • menu
  • message-box
  • small-caption
  • status-bar
These keyword values set the font to the one that is used on the user's operating system for that particular category. For example, defining "caption" will set the font on that element to use the same font that is used on the operating system for captioned controls (buttons, drop-downs, etc).

A single keyword comprises the entire value:

body {
font: menu;
}

The other properties mentioned earlier are not valid in conjunction with these keywords. These keywords can only be used with font shorthand and cannot be declared using any of the individual longhand properties.