Open In App

CSS font-variant-caps Property

Improve
Improve
Like Article
Like
Save
Share
Report

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:

  • Google Chrome 52+
  • Firefox 34+
  • Edge 79+
  • Opera 39+
  • Safari 9.1+


Last Updated : 26 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads