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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome
No support No |
Edge
No support No |
Firefox Full support 34 Full support 34 No support 24 — 34 Disabled' From version 24 until version 34 (exclusive): this feature is behind the |
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 Full support 34 No support 24 — 34 Disabled' From version 24 until version 34 (exclusive): this feature is behind the |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Chrome
No support No |
Edge
No support No |
Firefox Full support 34 Full support 34 No support 24 — 34 Disabled' From version 24 until version 34 (exclusive): this feature is behind the |
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 Full support 34 No support 24 — 34 Disabled' From version 24 until version 34 (exclusive): this feature is behind the |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No | |
Chrome
No support No |
Edge
No support No |
Firefox Full support 34 Full support 34 No support 24 — 34 Disabled' From version 24 until version 34 (exclusive): this feature is behind the |
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 Full support 34 No support 24 — 34 Disabled' From version 24 until version 34 (exclusive): this feature is behind the |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No | |
Chrome
No support No |
Edge
No support No |
Firefox Full support 34 Full support 34 No support 24 — 34 Disabled' From version 24 until version 34 (exclusive): this feature is behind the |
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 Full support 34 No support 24 — 34 Disabled' From version 24 until version 34 (exclusive): this feature is behind the |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No | |
Chrome
No support No |
Edge
No support No |
Firefox Full support 34 Full support 34 No support 24 — 34 Disabled' From version 24 until version 34 (exclusive): this feature is behind the |
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 Full support 34 No support 24 — 34 Disabled' From version 24 until version 34 (exclusive): this feature is behind the |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No | |
Chrome
No support No |
Edge
No support No |
Firefox Full support 34 Full support 34 No support 24 — 34 Disabled' From version 24 until version 34 (exclusive): this feature is behind the |
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 Full support 34 No support 24 — 34 Disabled' From version 24 until version 34 (exclusive): this feature is behind the |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No | |
Chrome
No support No |
Edge
No support No |
Firefox Full support 34 Full support 34 No support 24 — 34 Disabled' From version 24 until version 34 (exclusive): this feature is behind the |
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 Full support 34 No support 24 — 34 Disabled' From version 24 until version 34 (exclusive): this feature is behind the |
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.
font-variant-alternates by Mozilla Contributors is licensed under CC-BY-SA 2.5.