The font-variant property specifies if a text should be displayed in small caps. This property should not be confused with text-transform. It is a shorthand property of font.
CSS
font-variant: value;
Small caps differ from regular capitals in the way that small caps are the scaled down versions of the regular capitals.
Values
normal : This is the default value which renders normal font.
small-caps : This converts the font into small caps.
Examples
See the Pen font-variant: small caps by Aakhya Singh (@aakhya) on CodePen.
In the above example, all the letters except the first one got converted into small caps. This is because the value small-caps converts the lowercase letters into small caps and does not affect the uppercase letters.
Therefore, if you give both the properties font-variant and text-transform to some text and set the value of the former small-caps, then the text will appear in uppercase if the value of the latter is uppercase and in small caps if its value is lowercase.
See the Pen Converting lowercase and uppercase text to small caps by Aakhya Singh (@aakhya) on CodePen.
Browser Support
This property is supported by almost all the browsers.
