CODESCRACKER

CSS font-variant

The CSS font-variant property is used to define whether the text should be in small-caps or not. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .one{font-variant: normal;}
      .two{font-variant: small-caps;}
   </style>
</head>
<body>

   <h2>font-variant: normal</h2>
   <p class="one">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

   <h2>font-variant: small-caps</h2>
   <p class="two">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
   
</body>
</html>
Output

font-variant: normal

Lorem ipsum dolor sit amet consectetur adipisicing elit.

font-variant: small-caps

Lorem ipsum dolor sit amet consectetur adipisicing elit.

In the above example, I defined two classes in the CSS styles, which are ".one" and ".two."

The following CSS code:

font-variant: normal;

is used in the ".one" class, and whereas:

font-variant: small-caps;

is used in the ".two" class. These two classes are used to apply their respective classes to the p elements.

The font-variant property specifies whether the font should use small caps. When font-variant: normal; is applied to an element, the text is rendered in the normal font variant with no other changes. When the font-variant: small-caps; attribute is applied to an element, the text is rendered in the small caps variant.

We have two p elements in the HTML body with different classes, .one and .two. Because the first paragraph is styled with the .one class, the text appears in the standard font variant. The second paragraph is styled with the .two class, so the text appears in small caps.

Therefore, the above code would produce two paragraphs with different font variants, one in normal and one in small caps.

Note: The height of characters is the same, but they get capitalized using small-caps (small capitals).

CSS font-variant syntax

The syntax of the font-variant property in CSS is:

font-variant: x;

The value of x should be any of the following:

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!