CSS font-variant-caps Property

CSS font-variant-caps Property

This css property controls the use of alternate glyphs for capital letters.

Syntax -

Now we will see the values with their description -

Value	Description
normal	This value deactivates the use of alternate glyphs
small-caps	It displays small capitals
all-small-caps	It displays small capitals for both of the upper and lowercase letters
petite-caps	It displays petite capitals
all-petite-caps	It displays petite capitals for both of the upper and lowercase letters
unicase	It displays a mix of small capitals for uppercase letters with the normal lowercase letters
titling-caps	It displays titling capitals

Now we will see the example

Example -

<html>
<head>
<title>Title of the document</title>
<style>
h1.one{
font-variant-caps:normal;}
h1.two{
font-variant-caps:all-petite-caps;
}

h1.three {
font-variant-caps:all-small-caps;
}
h1.three {
font-variant-caps:unicase;
}
h1.five {
font-variant-caps:titling-caps;
}
</style>
</head>
<body>
<h1 class="one">This is the sample heading</h1>
<h1 class="two">This is the sample heading</h1>
<h1 class="three">This is the sample heading</h1>
<h1 class="four">This is the sample heading</h1>
<h1 class="five">This is the sample heading</h1>
</body>
</html>

Output -