What is the CSS font-variant property?

The font-variant property in CSSCascade Style Sheets is used to specify whether we want the text to be displayed in small-caps font or not.

Note: Small-caps font is used to convert all the lowercase letters into upper case, but the font size of converted letters is smaller than the original uppercase letters.

Syntax

font-variant: normal|small-caps|initial|inherit;

Property values

• normal: It is the default value. It is used to display the normal font.

• small-caps: It is used to display the small-caps font by the browser.

• initial: It sets the value to its default value.

• inherit: It inherits the property from its parent value.

Code

The basic HTMLHyperText Markup Language and CSS code to demonstrate the use of the font-variant property is as follows:

Explanation

In this example, we set the font-variant property as small caps. In the output, all the lowercase letters are converted into uppercase letters. However, there is a difference in the font size of converted alphabets. We can set the property as per our requirements.