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

PropertyDescription
fontSets all the font properties in one declaration
font-familySpecifies the font family for text
font-sizeSpecifies the font size of text
font-styleSpecifies the font style for text
font-variantSpecifies whether or not a text should be displayed in a small-caps font
font-weightSpecifies 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.


0 Comments

Leave a Reply

Avatar placeholder