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+