Many of the font properties introduced so far can be specified together with a single declaration. The property used to do this is the font property. It is inherited and the shorthand for setting font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family properties. The line-height property specifies line spacing and discussed shortly in the chapter. The font property is also used to set the font of an element to a system default font, using specific keywords. The things to bear in mind are:
- Specifying the font-size and font-family properties is mandatory, except when using a keyword.
- Only normal and small-caps are allowed as values for font-variant.
- The values of font-stretch, font-size-adjust, and font-kerning are reset to initial values.
- The order is that if font-style, font-variant, and font-weight are specified, they must be before the font-size The line-height value must be immediately after font-size and preceded by a mandatory “/” (e.g., 12px/1.5em).
- The font-family property must be the last value specified.
The example, p { font: bold small-caps bolder 18px/3em “Open Sans” sans-serif; }, says to assign to the content of the <p> element bold font-style, small-caps font-variant, bolder font-weight, 18px font-size, and 3em line- height, and “Open Sans” sans-serif font-family.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.