CSS font-variant-alternates Property
Description
The font-variant-alternates property provides control over the selection of a variety of alternate glyphs in addition to the default glyph for that character.
- Initial value
- normal
- Applies to
- All elements
- Inherited
- Yes
- Media
- Visual
- Computed value
- As specified
- Animatable
- No
- CSS Version
- CSS3
- JavaScript syntax
- object.style.fontVariantAlternates
Syntax
font-variant-alternates: normal | [ stylistic(<feature-value-name>) || historical-forms || styleset(<feature-value-name> #) || character-variant(<feature-value-name> #) || swash(<feature-value-name>) || ornaments(<feature-value-name>) || annotation(<feature-value-name>) ]
Values
- normalNone of the features listed below are enabled.
- stylistic(<feature-value-name>)Enables display of stylistic alternates (font specific, OpenType feature: salt <feature-index>).
- historical-formsEnables display of historical forms (OpenType feature: hist).
- styleset(<feature-value-name> #)Enables display with stylistic sets (font specific, OpenType feature: ss<feature-index> OpenType currently defines ss01 through ss20).
- character-variant(<feature-value-name> #)Enables display of specific character variants (font specific, OpenType feature: cv<feature-index> OpenType currently defines cv01 through cv99).
- swash(<feature-value-name>)Enables display of swash glyphs (font specific, OpenType feature: swsh <feature-index>, cswh
). - ornaments(<feature-value-name>)Enables replacement of default glyphs with ornaments, if provided in the font (font specific, OpenType feature: ornm <feature-index>).
- annotation(<feature-value-name>)Enables display of alternate annotation forms (font specific, OpenType feature: nalt <feature-index>).
Example
.class {
font-variant-alternates: swash(flowing);
}Browser Support
| Desktop | |||||
 |
 |
 |
 |
 |
 |
| X | X | X | 34 | X | X |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| X | X | 34 | X | X | X |