The font
property is a shorthand property for setting the font-style
, font-variant
, font-weight
, font-size
, line-height
, and font-family
properties, all in one abbreviated notation. You should set font-stretch
and fontsize-adjust
with their individual properties. The syntax of the font:
shorthand property is as follows:
font: <font-style> <font-variant> <font-weight> <font-size> / <line-height> <fontfamily>
The font-size
and font-family
are required properties, whereas the other properties will revert to their defaults if they are missing. Here is a minimalist example:
p { font: 0.9em serif; }
This CSS rule sets all paragraph text to 90% of the current font size with the default serif font family. A more complete example utilizing the entire font property follows:
p { font: italic small-caps bold 0.9em/110% "new century schoolbook", serif; }
To abbreviate a longhand declaration:
.errormsg {
font-size: 12px; color: #ff0000; font-family: arial, helvetica, sans-serif;
font-weight: bold;
}
do this, using the shorthand font: notation:
.errormsg {
font:bold 12px arial,helvetica,sans-serif;color:#f00;
}
Note that you can change the order in which some properties appear. Most browsers will allow this. However, to avoid any problems with current or future browsers that may be stricter in their interpretation, it is a best practice to supply the properties in the order that the W3C lists them in the specification.