The font-variant-alternates
CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values
.
/* Keyword values */ font-variant-alternates: normal; font-variant-alternates: historical-forms; /* Functional notation values */ font-variant-alternates: stylistic(user-defined-ident); font-variant-alternates: styleset(user-defined-ident); font-variant-alternates: character-variant(user-defined-ident); font-variant-alternates: swash(user-defined-ident); font-variant-alternates: ornaments(user-defined-ident); font-variant-alternates: annotation(user-defined-ident); font-variant-alternates: swash(ident1) annotation(ident2); /* Global values */ font-variant-alternates: initial; font-variant-alternates: inherit; font-variant-alternates: unset;
The @font-feature-values
at-rule can define names for alternative glyph functions (stylistic
, styleset
, character-variant
, swash
, ornament
or annotation
), associating the name with OpenType parameters. This property allows those human-readable names (defined in @font-feature-values
) in the stylesheet.
Syntax
This property may take one of two forms:
- either the keyword
normal
- or one or more of the other keywords and functions listed below, space-separated, in any order.
Values
normal
- This keyword deactivates alternate glyphs.
historical-forms
- This keyword enables historical forms — glyphs that were common in the past but not today. It corresponds to the OpenType value
hist
. stylistic()
- This function enables stylistic alternates for individual characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value
salt
, likesalt 2
. styleset()
- This function enables stylistic alternatives for sets of characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value
ssXY
, likess02
. character-variant()
- This function enables specific stylistic alternatives for characters. It is similar to
styleset()
, but doesn't create coherent glyphs for a set of characters; individual characters will have independent and not necessarily coherent styles. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType valuecvXY
, likecv02
. swash()
- This function enables swash glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType values
swsh
andcswh
, likeswsh 2
andcswh 2
. ornaments()
- This function enables ornaments, like fleurons and other dingbat glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value
ornm
, likeornm 2
.Note: In order to preserve text semantics, font designers should include ornaments that don't match Unicode dingbat characters as ornamental variants of the bullet character (U+2022). Be aware that some existing fonts don't follow this advice. annotation()
- This function enables annotations, like circled digits or inverted characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value
nalt
, likenalt 2
.
Formal definition
Initial value | normal |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
Formal syntax
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> ) ]where
<feature-value-name> = <custom-ident>
Examples
HTML
<p>Firefox rocks!</p> <p class="variant">Firefox rocks!</p>
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); }
Result
Note: You need to install the OpenType font Leitura Display Swashes for this example to work. You can find a few free versions for testing purposes, for example from fontsgeek.com.
Specifications
Not part of any standard.
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
font-variant-alternates | Chrome No support No | Edge No support No | Firefox
Full support
34
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
34
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
annotation() | Chrome No support No | Edge No support No | Firefox
Full support
34
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
34
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
character-variant() | Chrome No support No | Edge No support No | Firefox
Full support
34
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
34
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
ornaments() | Chrome No support No | Edge No support No | Firefox
Full support
34
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
34
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
styleset() | Chrome No support No | Edge No support No | Firefox
Full support
34
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
34
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
stylistic() | Chrome No support No | Edge No support No | Firefox
Full support
34
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
34
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
swash() | Chrome No support No | Edge No support No | Firefox
Full support
34
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
34
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.
- User must explicitly enable this feature.
- User must explicitly enable this feature.