This document is a work in progress and is subject to change.
Summary
The font property is a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height and font-family at the same place in the style sheet.
| Applicability: | The font property can be used for all CSS elements. | |
| Media Group: | Visual | |
| Inherited: | Yes |
Syntax
TARGET_ELEMENT{font: [font-style] [font-variant] [font-weight] [font-size] [font-family]}
Legal Values
Since the font tag is a shorthand for defining multiple other font related properties in one place, the legal values of the font tag are the same as the legal values as the css properties that the font tag encapsulates. Therefore, see font-style, font-variant, font-weight, font-size, line-height and font-family for legal values of each property.
Mozilla Recommended Values
Usage Examples
/* Set the font size to 12pt and the line height to 14pt. Set the font family to sans-serif */
p { font: 12pt/14pt sans-serif }
/* Set the font size to 80% of the parent tag or default value (if no parent tag present)
and set the font family to sans-serif */
p { font: 80% sans-serif }
/* Set the font weight to bold, the font-style to italic, the font size to large,
and the font family to serif. */
p { font: bold italic large serif }
Notes
Properties for which no values are given are set to their initial value. See table below for initial values of the various font properties
| Font Property | Initial Value |
|---|---|
| font-style | normal |
| font-variant | normal |
| font-weight | normal |
| font-size | medium |
| line-height | normal |
| font-family | User Agent specific |
The World Wide Web Consortium (W3C) provides a free online CSS validation service.