Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

font-variant-alternates

Our volunteers haven't translated this article into Tiếng Việt yet. Join us and help get the job done!

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 valuenormal
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderorder 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 like salt 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 like ss02.
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 value cvXY like cv02.
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 and cswh like swsh 2 and cswh 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 like ornm 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 like nalt 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.

Document Tags and Contributors

 Contributors to this page: duncanmcdonald, Sebastianz, fscholz, jsx, teoli
 Last updated by: duncanmcdonald,