font

Definition

The font property is a shorthand property that allows you to set various font-related properties in a single declaration. It provides a convenient way to define the font family, size, weight, style, and line height of an element’s text content.

The font property accepts multiple values in a specific order:

• font-style: Specifies the style of the font (e.g., italic, oblique, or normal).
• font-variant: Specifies the variation of the font (e.g., small-caps or normal).
• font-weight: Specifies the weight or thickness of the font (e.g., bold, normal, or numeric values such as 400 or 700).
• font-size: Specifies the size of the font (e.g., 12px, 1rem, or small).
• line-height: Specifies the height of a line of text (e.g., 1.5, normal, or 2em).
• font-family: Specifies the font family or list of fonts to be used (e.g., 'Arial', sans-serif).

Here’s an example:

h1 {
  font: italic small-caps bold 24px/1.5 "Arial", sans-serif;
}

In this example, the font property sets the font style to italic, the font variant to small-caps, the font weight to bold, the font size to 24px, the line height to 1.5, and the font family to 'Arial', sans-serif. This rule would apply to <h1> elements, rendering the text with the specified font properties.

The font shorthand property allows for concise and efficient declaration of font-related properties, making it easier to manage and control the typography of your web page.