CSS font-variant-caps

The CSS font-variant-caps property is used when we need to control the usage of alternate glyphs for capital letters. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .one{font-variant-caps: normal;}
      .two{font-variant-caps: small-caps;}
      .three{font-variant-caps: all-small-caps;}
      .four{font-variant-caps: petite-caps;}
      .five{font-variant-caps: all-petite-caps;}
      .six{font-variant-caps: titling-caps;}
      .seven{font-variant-caps: unicase;}
   </style>
</head>
<body>

   <h2>font-variant-caps: normal</h2>
   <p class="one">I am from Germany.</p>

   <h2>font-variant-caps: small-caps</h2>
   <p class="two">I am from Germany.</p>

   <h2>font-variant-caps: all-small-caps</h2>
   <p class="three">I am from Germany.</p>

   <h2>font-variant-caps: petite-caps</h2>
   <p class="four">I am from Germany.</p>

   <h2>font-variant-caps: all-petite-caps</h2>
   <p class="five">I am from Germany.</p>

   <h2>font-variant-caps: titling-caps</h2>
   <p class="six">I am from Germany.</p>

   <h2>font-variant-caps: unicase</h2>
   <p class="seven">I am from Germany.</p>
   
</body>
</html>
Output

font-variant-caps: normal

I am from Germany.

font-variant-caps: small-caps

I am from Germany.

font-variant-caps: all-small-caps

I am from Germany.

font-variant-caps: petite-caps

I am from Germany.

font-variant-caps: all-petite-caps

I am from Germany.

font-variant-caps: titling-caps

I am from Germany.

font-variant-caps: unicase

I am from Germany.

CSS font-variant-caps Syntax

The syntax of font-variant-caps property in CSS, is:

font-variant-caps: x;

The value of x should be any of the following:

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!