The font
property in CSS is a shorthand property that allows you to set various font-related properties for text content. It simplifies the process of specifying multiple font properties in a single declaration, providing a concise way to style text.
Syntax:
/* Example of using the font property */
.element
{
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
}
Properties:
The table below illustrates font properties along with their descriptions.
CSS Property | Description |
---|---|
font-style | Sets the style of the font (e.g., normal, italic, oblique). |
font-variant | Sets the variation of the font (e.g., normal, small-caps). |
font-weight | Sets the boldness of the font (e.g., normal, bold, bolder, lighter). |
font-size | Sets the size of the font. |
line-height | Sets the height of a line of text. |
font-family | Sets the font family for the text. |
Features:
-
Conciseness: The
font
property combines multiple font-related properties into a single line, improving code readability. -
Order Matters: The order of the values within the
font
property is important; it follows the sequence mentioned above.