CSS font-variant-alternates Property
The font-variant-alternates CSS property deals with the selection of alternate glyphs. See the values and try examples.
The font-variant-alternates property takes control over the selection of alternate glyphs.
The names of alternate glyph functions (styleset, stylistic, character-variant, ornament, swash, annotation) can be defined in @font-feature-values. The human-readable names specified in @font-feature-values are allowed in the stylesheet.
| Initial Value | normal |
|---|---|
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.fontVariantAlternates = "normal"; |
Syntax
Syntax of CSS font-variant-alternates Property
font-variant-alternates: normal | historical-forms | stylistic() | styleset() | character-variant() | swash() | ornaments() | annotation();Example of the font-variant-alternates property:
Example of CSS font-variant-alternates Property
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@font-feature-values "Leitura Display Swashes" {
@swash {
fancy: 1;
}
}
p {
font-size: 2rem;
}
.variant {
font-family: Leitura Display Swashes;
font-variant-alternates: swash(fancy);
}
</style>
</head>
<body>
<h2>Font-variant-alternates property example</h2>
<p>This paragraph uses the swash alternate.</p>
<p class="variant">This paragraph uses the swash alternate.</p>
</body>
</html>Result
Values
| Value | Description |
|---|---|
| normal | None of the features are enabled. |
| historical-forms | Enables display of historical forms. |
| stylistic() | Enables display of stylistic alternates. |
| styleset() | Enables display with stylistic sets. |
| character-variant() | Enables specific stylistic alternatives for characters. |
| swash() | Enables swash glyphs. |
| ornaments() | Enables display of ornaments. |
| annotation() | Enables alternate annotation forms. |
| initial | It makes the property use its default value. |
| inherit | It inherits the property from its parents element. |
Browser Compatibility
| Browser | Support |
|---|---|
| Chrome | 36+ |
| Edge | 79+ |
| Firefox | 34+ |
| Safari | 10+ |
| Opera | 23+ |
Practice
Practice
What function does the 'font-variant-alternates' property in CSS have?