Font-variant

CSS font-variant property allows us to set the text as normal or small-caps from a font family.

This property has been extended in CSS3.

Well, what does small-caps mean?

Let us explain you basicly. When we select small-caps for a text, it makes the lowercase letters to the uppercase letters but these converted letters will be displayed a little smaller than normal uppercase letters. If you didn't understand, don't worry because you will totally understand it in the example.

CSS Syntax

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

Let's see an example:

<!DOCTYPE html>
<html>
  <head>
    <style>
        .smallcaps {font-variant: small-caps;}
    </style>
  </head>
  <body>

    <p> Here we used a normal text as you can see.</p>
    <p class="smallcaps">But We Used A Text With Small-Caps Here.</p>

  </body>
</html>

Here the result is:



Property Values

Value Descriptions
normal It means that text characters will be normal. It is the default value of this property.
small-caps When it is set as small-caps, the browser displays a small-caps font.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.