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.
Initial value | normal |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | order of appearance in the formal grammar of the values |
This property may take one of two forms:
normal
normal
historical-forms
hist
.stylistic()
salt
, like salt 2
.styleset()
ssXY
, like ss02
.character-variant()
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 value cvXY
, like cv02
.swash()
swsh
and cswh
, like swsh 2
and cswh 2
.ornaments()
ornm
, like ornm 2
. annotation()
nalt
, like nalt 2
.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>
<p>Firefox rocks!</p> <p class="variant">Firefox rocks!</p>
@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); }
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.
Specification | Status | Comment |
---|---|---|
CSS Fonts Module Level 3 The definition of 'font-variant-alternates' in that specification. | Candidate Recommendation | Initial definition |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | No | No | 34
|
No | No | No |
annotation()
|
No | No | 34
|
No | No | No |
character-variant()
|
No | No | 34
|
No | No | No |
ornaments()
|
No | No | 34
|
No | No | No |
styleset()
|
No | No | 34
|
No | No | No |
stylistic()
|
No | No | 34
|
No | No | No |
swash()
|
No | No | 34
|
No | No | No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | No | No | No | 34
|
No | No | No |
annotation()
|
No | No | No | 34
|
No | No | No |
character-variant()
|
No | No | No | 34
|
No | No | No |
ornaments()
|
No | No | No | 34
|
No | No | No |
styleset()
|
No | No | No | 34
|
No | No | No |
stylistic()
|
No | No | No | 34
|
No | No | No |
swash()
|
No | No | No | 34
|
No | No | No |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates