我们的志愿者还没有将这篇文章翻译为 中文 (简体)。加入我们帮助完成翻译!
Summary
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
.
The at-rules defines names, for a given kind of alternative glyphs (stylistic
, styleset
, character-variant
, swash
, ornament
or annotation
), associating it to a given OpenType values. This property allows to use these user-friendly names (as 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 |
Syntax
font-variant-alternates: normal; font-variant-alternates: historical-forms; 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;
Values
normal
- This keyword leads to the deactivation of the use of such alternate glyphs.
historical-forms
- This keyword enables the display of historical forms, that is glyphs that were common in the past but no more today. It corresponds to the OpentType value
hist
. stylistic()
- This function enables the display of a stylistic alternates. The parameter is a font-specific names mapped to a number. It corresponds to the OpenType value
salt
likesalt 2
. styleset()
- This function enables the usage of a set of stylistic alternatives for characters. The parameter is a font-specific names mapped to a number. It corresponds to the OpenType value
ssXY
likess02
. character-variant()
- This function enables the usage of a set of stylistic alternatives for characters. It is very similar to
styleset()
though the variant here doesn't create coherent glyphs for a set of characters; individual characters will have independant and not necessary coherent styles. The parameter is a font-specific names mapped to a number. It corresponds to the OpenType valuecvXY
likecv02
. swash()
- This function enables the display of swash glyphs. The parameter is a font-specific names mapped to a number. It corresponds to the OpenType value
swsh
andcswh
likeswsh 2
andcswh 2
. ornaments()
- This function enables the display of ornaments, that are fleurons and other dingbats-like glyphs. The parameter is a font-specific names mapped to a number. It corresponds to the OpenType value
ornm
likeornm 2
.Note: in order to preserve the semantic of the font, font designer are invited to include ornaments that doesn't match a Unicode zingbat character as ornaments variant of the bullet character (U+2022). Well-formed fonts will do that, though a lot of other fonts won't. annotation()
- This function enables the display of annotations, like circled digits or inverterd characters. The parameter is a font-specific names mapped to a number. It corresponds to the OpenType value
nalt
likenalt 2
.
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>
Example
HTML
<p>Firefox rocks!</p> <p class="variant">Firefox rocks!</p>
CSS
p.variant { font-family: Leitura Display Swashes; font-variant-alternates: swash(2); }
Result
Note: you need the Open Type font Leitura Display Swashes installed for this example to work
Specifications
Specification | Status | Comment |
---|---|---|
CSS Fonts Module Level 3 The definition of 'font-variant-alternates' in that specification. |
Candidate Recommendation | Initial definition |
Browser Compatibility
Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 34 (34) [1] | ? | ? | ? | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | 34.0 (34)[1] | ? | ? | ? |
[1] Experimental implementation was available since Gecko 24. It was governed by the preference layout.css.font-features.enabled
defaulting to true
on Nightly and Aurora only.