CSS font-variant-alternates property
The font-variant-alternates property in CSS is identified for controlling the usage of alternate glyphs. Such alternate glyphs can be referenced by the alternative names which are defined in font-feature-values. The font-feature-values at-rule may define names for the alternative glyph functions, relating to the names with the OpenType parameters. this property can take any of the forms like- either the keyword 'normal' or may one or more of the other keywords and functions.
Syntax for font-variant-alternates property:
Following is the syntax for the font-variant-alternates property.
font-variant-alternates: normal | historical-forms | stylistic() | styleset() | character-variant() | swash() | ornaments() | annotation();
Example: CSS font-variant-alternates property
Here in the example below, we are using the font-variant-alternates property with different border styles, colors, and their different values. In this case, we have given the font-variant-alternates property value as swash fancy. So, the text gets designed in a specific style.
<!DOCTYPE html>
<html>
<head>
<title>The font-variant-alternates property in CSS</title>
<style type="text/css">
@font-feature-values "Leitura Display Swashes" {
@swash { fancy: 1 }
}
p {
font-size: 1.5rem;
}
.variant {
font-family: Leitura Display Swashes;
font-variant-alternates: swash(fancy);
}
</style>
</head>
<body>
<p>Study Tonight rocks!</p>
<p class="variant">Study Tonight rocks!</p>
</body>
</html>
Output:
Example 2: CSS font-variant-alternates property
Here in the example below, we are using the font-variant-alternates property with different border styles, colors, and their different values. In this case, we have given the font-variant-alternates property value as an annotation. This gives an annotation to the text.
<!DOCTYPE html>
<html>
<head>
<title>The font-variant-alternates property in CSS</title>
<style type="text/css">
p {
font-size: 1.5rem;
font-variant-alternates: annotation;
}
.variant {
font-family: Leitura Display Swashes;
font-variant-alternates: annotation;
}
</style>
</head>
<body>
<p>Study Tonight rocks!</p>
<p class="variant">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 |
no |
no |
| Edge |
no |
no |
| Firefox |
34 |
34 |
| Internet Explorer |
no |
no |
| Opera |
no |
no |
| Safari |
no |
no |
| Webview Android |
no |
no |
| Chrome Android |
no |
no |
| Firefox Android |
34 |
34 |
| Opera Android |
no |
no |
| IOS Safari |
no |
no |
| Samsung Internet |
no |
no |
Conclusion
The initial value for the font-variant-alternates property in CSS 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.
