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
Small caps differ from regular capitals in the way that small caps are the scaled down versions of the regular capitals.
normal : This is the default value which renders normal font.
small-caps : This converts the font into small caps.
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
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
See the Pen Converting lowercase and uppercase text to small caps by Aakhya Singh (@aakhya) on CodePen.
This property is supported by almost all the browsers.