The CSS font-variant property determines the font variant to apply to an element. It offers options like normal and small-caps. When small-caps is chosen, lowercase letters are transformed into uppercase but in a reduced size compared to the original uppercase letters. This property defines whether the text should display in small-caps font or not.
The result produced by the font-variant property may be influenced by the text-transform property's value. When font-variant is set to small-caps and text-transform is set to lowercase, the characters will display in lowercase. Similarly, when font-variant is set to small-caps and text-transform is set to uppercase, the characters will display in uppercase.
The small-caps feature of this CSS attribute won't function properly when the characters in the code are in uppercase. For instance, if there's a paragraph where all characters are in uppercase, and we decide to use the font-variant attribute with small-caps value on that paragraph, the text will appear in regular uppercase format rather than small-caps.
Syntax
font-variant: normal | small-caps | initial | inherit;
Property values
The definitions of this CSS attribute are outlined in the following manner:
It represents the default value, indicating the regular font style.
It is employed to define the small-caps typeface, where lowercase characters appear as uppercase letters but in a reduced size.
It establishes the attribute to its original default setting.
It acquires the property from its parent element.
Example
In this instance, we are implementing the font-variant: small-caps; property on the paragraph elements. Within the initial paragraph, the text is currently displayed in capital letters, hence the small-caps setting will not supersede it. However, the content within the subsequent paragraph is impacted by the small-caps property as it is not initially in uppercase.
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-variant: small-caps;
font-size: 25px;
}
h2 {
font-variant: normal;
}
</style>
</head>
<body>
<h2> This heading is shown in the normal font. </h2>
<p> HELLO WORLD </p>
<p> hello world. This text is affected by the <b> small-caps </b> value. </p>
</body>
</html>
Output