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
font-variant-alternates: normal | historical-forms | stylistic() | styleset() | character-variant() | swash() | ornaments() | annotation();Example of the 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>Only Firefox supports this property.</p>
<p class="variant">Only Firefox supports this property.</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. |