CSS font-variant

The font-variant property in CSS allows you to select an alternate font style for a font that may have some decorative or fancier variants.

Syntax

The syntax for the font-variant property is:

font-variant: normal | small-caps | <common-variant-values> | <historical-variant-values> | <east-asian-variant-values> | inherit;

• normal: Specifies a standard font style without any alternate variants.
• small-caps: Specifies that all lowercase letters in the text should be displayed as small capital letters.
• <common-variant-values>: Specifies one or more common font variant values, such as oldstyle-nums, lining-nums, and tabular-nums.
• <historical-variant-values>: Specifies one or more historical font variant values, such as historical-forms, stylistic, and swash.
• <east-asian-variant-values>: Specifies one or more East Asian font variant values, such as jis78, jis83, and jis90.

Examples

font-variant: normal;

This specifies a normal font variant without any alternate styles.

font-variant: small-caps;

This specifies that all lowercase letters should be displayed as small capital letters.

font-variant: oldstyle-nums;

This specifies that the font should use old-style numbers instead of standard lining digits.

Browser Compatibility

The font-variant property is widely supported in modern web browsers. However, some of the less common values may not be supported in all browsers.

Conclusion

The font-variant property in CSS is useful for selecting alternate font styles that may have decorative or fancier variants. You can use the various values available to fine-tune the appearance of your text and give it a unique look and feel.