Skip to content
Related Articles

Related Articles

Improve Article

CSS font-variant-caps Property

  • Last Updated : 06 Sep, 2021

The font-variant-caps property changes the position of characters vertically without shifting the baseline and displays them as superscript or subscript. This property selects the most appropriate glyphs if the given font has some capital letter glyphs of different sizes.

Syntax:

font-variant-caps: keyword_values

Or

font-variant-caps: Global_values

Default Value: 

  • normal 

Property values: This property accepts two values mentioned above and described below.



  • keyword_values: This property refers to the keyword_values defined with units like normal, small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps, etc.
  • Global_values: This property refers to the global values like initial, inherit, unset, etc.

Syntax:

font-variant-caps: small-caps | all-small-caps | normal |
 inherit | petite-caps |  unicase | all-petite-caps |
 titling-caps | unset | initial 

Example 1:Below is the code which illustrates the use of font-variant-caps property with all-small-caps, small-caps, normal.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        .allSmallCaps {
            font-variant-caps: all-small-caps;
            font-style: italic;
        }
 
        .smallCaps {
            font-variant-caps: small-caps;
            font-style: italic;
        }
 
        .Normal {
            font-variant-caps: normal;
            font-style: italic;
        }
    </style>
</head>
 
<body>
    <div class="Container" style="text-align: center;">
        <h1 style="color: green; text-align: center;">
            GeeksforGeeks</h1>
        <p class="allSmallCaps">
            a computer Science portal
        </p>
 
 
        <p class="smallCaps">It is a Small caps</p>
 
 
        <p class="Normal">It is a Normal caps</p>
 
 
    </div>
</body>
 
</html>

Output:

Example 2: Below is the code which illustrates the use of font-variant-caps property with petite-caps, unicase, all-petite-caps, titling-caps.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        .petite-caps {
            font-variant-caps: petite-caps;
            font-style: italic;
        }
 
        .all-petite-caps {
            font-variant-caps: all-petite-caps;
            font-style: italic;
        }
 
        .unicase {
            font-variant-caps: unicase;
            font-style: italic;
        }
 
        .titling-caps {
            font-variant-caps: titling-caps;
            font-style: italic;
        }
    </style>
</head>
 
<body>
    <div class="Container" style="text-align:center;">
        <h1 style="color: green; text-align:center;">
            GeeksforGeeks</h1>
        <p class="petite-caps">
            It is a petite-caps
        </p>
 
 
        <p class="all-petite-caps">
            It is a all-petite-caps
        </p>
 
 
        <p class="unicase">
            It is a unicase
        </p>
 
 
        <p class="titling-caps">
            It is a titling caps
        </p>
 
 
    </div>
</body>
 
</html>

Output: 

Supported Browsers:

  • Chrome
  • Firefox
  • Edge
  • Opera



My Personal Notes arrow_drop_up
Recommended Articles
Page :