CSS font-variant property
The font-variant property in CSS is a shorthand property that allows setting all the font variants of a font. We can also set the CSS Level 2 values of the font-variant using the font shorthand property. This property is a shorthand for the CSS properties like- font-variant-caps, font-variant-alternates, font-variant-east-asian, font-variant-numeric and font-variant-ligatures.
Syntax for font-variant property:
Following is the syntax for the font-variant property.
font-variant: normal|small-caps|initial|inherit;
Example: CSS font-variant property
In this example, we are using the font-variant property to design our text and paragraphs. In this case, we have given the font-variant property as normal and small-caps. Hence, the text gets designed in two ways- normal way simply means the way we are used to writing sentences, and the small caps means the small capital letters form. And we have written two sentences to show both the types of font-variant styles.
<!DOCTYPE html>
<html>
<head>
<title>The font-variant property in CSS</title>
<style type="text/css">
p.normal {
font-variant: normal;
color: rebeccapurple;
}
p.small {
font-variant: small-caps;
color: deeppink;
}
</style>
</head>
<body>
<p class="normal">Study Tonight Rocks!</p>
<p class="small">Study Tonight Rocks!</p>
</body>
</html>
Output:
Example 2: CSS font-variant property
Here in the example below, we are using the font-variant property with different border styles, colors, and their different values. In this case, we have given the font-variant property value as small-caps slashed zero. Hence, the text gets designed in the way- small caps slashed zero means the small capital letters form with a unique style of slashed zero.
<!DOCTYPE html>
<html>
<head>
<title>The font-variant property in CSS</title>
<style type="text/css">
p.normal {
font-variant: small-caps slashed-zero;
color: rebeccapurple;
}
p.small {
font-variant: small-caps slashed-zero;
color: deeppink;
}
</style>
</head>
<body>
<p class="normal">Study Tonight Rocks!</p>
<p class="small">Study Tonight Rocks!</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 that 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 |
1 |
1 |
| Edge |
12 |
12 |
| Firefox |
1 |
1 |
| Internet Explorer |
4 |
4 |
| Opera |
3.5 |
3.5 |
| Safari |
1 |
1 |
| Webview Android |
1 |
1 |
| Chrome Android |
18 |
18 |
| Firefox Android |
4 |
4 |
| Opera Android |
11 |
11 |
| IOS Safari |
1 |
1 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value of the font-variant 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 aim nation type for this property is discrete.
