Definition
The font-variant
property is used to specify variations or alternate styles of a font. It allows you to apply special typographic effects to text, such as small caps or stylistic alternates. The property accepts several values, including normal
, small-caps
, all-small-caps
, petite-caps
, all-petite-caps
, unicase
, titling-caps
, and more.
Here’s an example:
h1 {
font-variant: small-caps;
}
In this example, the font-variant: small-caps;
rule sets the text within <h1>
elements to be displayed in small capitals. This effect transforms lowercase letters into smaller uppercase letters, providing a distinct typographic style.
The font-variant
property is useful for adding typographic variations and visual interest to text. It allows you to explore different font styles and effects to enhance the appearance of your content.