CSS Property - Font

Value: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
Initial: not defined for shorthand properties
Applies to: all elements
Inherited: yes
Percentage values: allowed on <font-size> and <line-height>

The "font" property is a shorthand property for setting the individual "font" properties in one string in a style sheet or as an inline style in a HTML document. The syntax of this property is based on a traditional typographical shorthand notation to set multiple properties related to fonts.

For a definition of allowed and initial values, see the previously defined properties. Properties for which no values are given are set to their initial value.


p {font: 12pt/14pt sans-serif;}
p {font: 80% sans-serif;}
p {font: x-large/110% "new century schoolbook", serif;}
p {font: bold italic large Palatino, serif;}
p {font: normal small-caps 120%/120% fantasy;}

In the second rule, the font size percentage value ("80%") refers to the font size of the parent element. In the third rule, the line height percentage refers to the font size of the element itself.

In the first three rules above, the "font-style", "font-variant" and "font-weight" are not explicitly mentioned, which means they are all three set to their initial value ("normal"). The fourth rule sets the "font-weight" to "bold", the "font-style" to "italic" and implicitly sets "font-variant" to "normal".

The fifth rule sets the "font-variant" ("small-caps"), the "font-size" (120% of the parent"s font), the "line-height" (120% times the font size) and the "font-family" ("fantasy"). It follows that the keyword "normal" applies to the two remaining properties: "font-style" and "font-weight".