PUBLISHED ON: APRIL 14, 2021
CSS font-variation-settings property
The font-variant-settings property in CSS is identified for providing the low-level control over variable fonts characteristic y specifying the font-letter axis names of the characters which you wish to vary with their values. This property may be specified in two forms such as normal or string number. In the case of normal, text is known to be laid out using the default settings. The font-variant-settings property is a low-level mechanism that is designed to set variable font features.
Syntax for font-variation-settings property:
Following is the syntax for the font-variation-settings property.
font-variant-settings: normal|small-caps|initial|inherit;
Example 1: CSS font-variation-settings property
Here in the example below, we are using the font-variation-settings property with different border styles, colors, and their different values. In this case, we have given the font-variation-settings property value as oblique. So, the text gets in a slanting style.
<!DOCTYPE html>
<html>
<head>
<title>The font-variation-settings property in CSS</title>
<style type="text/css">
.container1 * {
font-style: oblique 0deg;
color: deeppink;
}
</style>
</head>
<body>
<div class="container container1">
<p>Slant</p>
</div>
</body>
</html>
Output:
Example 1: CSS font-variation-settings property
Here in the example below, we are using the font-variation-settings property with different border styles, colors, and their different values. In this case, we have given the font-variation-settings property value as slant 0. This means that the style is not slanted i.e; it is simple.
<!DOCTYPE html>
<html>
<head>
<title>The font-variation-settings property in CSS</title>
<style type="text/css">
.container2 * {
font-variation-settings: 'slant' 0;
}
</style>
</head>
<body>
<div class="container container2">
<p>Slant</p>
</div>
</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 |
67 |
67 |
| Edge |
17 |
17 |
| Firefox |
62 |
62 |
| Internet Explorer |
no |
no |
| Opera |
49 |
49 |
| Safari |
11 |
11 |
| Webview Android |
62 |
62 |
| Chrome Android |
62 |
62 |
| Firefox Android |
62 |
62 |
| Opera Android |
46 |
46 |
| IOS Safari |
11 |
11 |
| Samsung Internet |
8.0 |
8.0 |
Conclusion
The initial value for the font-variant-settings property in CSS is normal. This property is applicable to all the elements and also to the ::first-line and ::first-letter. It is an inherited property. The computed value for this property is the as specified one. The animation type for this property is transform.
