W3cubDocs

/CSS

font-variant-alternates

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 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.

© 2005–2017 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