CSS font-variant-caps property
The font-variant-caps property in CSS is identified for controlling the use of alternate glyphs for the capital letters. When a particular font involves capital letter glyphs of multiple different sizes, this property selects the most appropriate ones among them. Fonts also sometimes involve special glyphs for various caseless characters like punctuation marks. But the small capital glyphs are not synthesized for the careless characters. This property is specified using a single keyword value.
Syntax for font-variant-caps property:
Following is the syntax for the font-variant-caps property.
font-variant-caps: normal|small-caps|all-small-caps|petite-caps|all-petite-caps|unicase|titling-caps|initial|inherit|unset;
Example: CSS font-variant-caps property
Here in the example below, we are using the font-variant-caps property with different border styles, colors, and their different values. In this case, we have given the font-variant-caps property value as small-caps and normal. Hence, the text or the paragraph gets designed with the text style having small capital letters and normal capital letters.
<!DOCTYPE html>
<html>
<head>
<title>The font-variant-caps property in CSS</title>
<style type="text/css">
.small-caps {
font-variant-caps: small-caps;
font-style: italic;
color: red;
}
.normal {
font-variant-caps: normal;
font-style: italic;
color: purple;
}
</style>
</head>
<body>
<p class="small-caps">Study Tonight rocks, small caps!</p>
<p class="normal">Study Tonight rocks, normal caps!</p>
</body>
</html>
Output:
Example 2: CSS font-variant-caps property
Here in the example below, we are using the font-variant-caps property with different border styles, colours and their different values. In this case, we have given the font-variant-caps property value as unicase. So, the letters get designed in the way of unicase i.e; only one letter gets in the capital letter form while others remain as it is.
<!DOCTYPE html>
<html>
<head>
<title>The font-variant-caps property in CSS</title>
<style type="text/css">
.small-caps {
font-variant-caps: unicase;
font-style: italic;
color: red;
}
.normal {
font-variant-caps: unicase;
font-style: italic;
color: purple;
}
</style>
</head>
<body>
<p class="small-caps">Study Tonight rocks, unicase caps!</p>
<p class="normal">Study Tonight rocks, unicase caps!</p>
</body>
</html>
Output:
Live Example
Here in this live example, you can test the code and execute the example using different values or even edit the code example.
Browser Compatibility
There are many browsers which do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
52 |
52 |
| Edge |
79 |
79 |
| Firefox |
34 |
34 |
| Internet Explorer |
no |
no |
| Opera |
39 |
39 |
| Safari |
no |
no |
| Webview Android |
52 |
52 |
| Chrome Android |
52 |
52 |
| Firefox Android |
34 |
34 |
| Opera Android |
41 |
41 |
| IOS Safari |
no |
no |
| Samsung Internet |
6.0 |
6.0 |
Conclusion
The initial value for the font-variant-caps property is normal. This property is applicable to all elements and also to the ::first-letter and ::first-line. It is an inherited property. The computed value for this property is the as specified one. The animation type for this property is discrete.
