CSS Font shorthand
The CSS font property is a shorthand property for setting the font-style, font-variant, font-weight, font-size, line-height, and font-family CSS properties.
The CSS Font Property
To shorten the code, it is likewise possible to specify all the individual font properties in one property.
The font property is a shorthand property for:
• font-style
• font-variation
• font-weight
• font-size/line-height
• font-family
Note: The font-size and font-family values are required. On the off chance that one of different values is missing, their default value are used.
Example
Use font to set several font properties in one declaration:
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
font: 20px Arial, sans-serif;
}
p.b {
font: italic bold 12px/30px Georgia, serif;
}
</style>
</head>
<body>
<h1>The font Property</h1>
<p class="a">This is a paragraph. The font size is set to 20 pixels, and the font family is Arial.</p>
<p class="b">This is a paragraph. The font is set to italic and bold, the font size is set to 12 pixels, the line height is set to 30 pixels, and the font family is Georgia.</p>
</body>
</html>
All CSS Font Properties
| Property | Description |
| font | Sets all the font properties in one declaration |
| font-family | Specifies the font family for text |
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.
