CSS - font-variant-alternates

Example

<p>Firefox rocks!</p>
<p class="variant">Firefox rocks!</p>

p.variant {
  font-family: Leitura Display Swashes;
  font-variant-alternates: swash(2);
}

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 <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> stylistic( <a href="css/font-variant-alternates#feature-value-name"><feature-value-name></a> ) <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> historical-forms <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> styleset( <a href="css/font-variant-alternates#feature-value-name"><feature-value-name></a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a> ) <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> character-variant( <a href="css/font-variant-alternates#feature-value-name"><feature-value-name></a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a> ) <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> swash( <a href="css/font-variant-alternates#feature-value-name"><feature-value-name></a> ) <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> ornaments( <a href="css/font-variant-alternates#feature-value-name"><feature-value-name></a> ) <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> annotation( <a href="css/font-variant-alternates#feature-value-name"><feature-value-name></a> ) <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <p>where <br><code><feature-value-name> = IDENT</code></p>

Description  

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.

Specifications  

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

License