font-variant-alternates property CSS Reference

Definition and Usage

For any given character, fonts can provide a variety of alternate glyphs in addition to the default glyph for that character. This property provides control over the selection of these alternate glyphs.

In cases where multiple alternates are possible, authors define a using the @font-feature-values rule described below to indicate the specific alternate to be used. The nature of these alternates is font specific, so the rule defines values for a specific font family or set of families. When a particular value has not been defined for a given family, the named value is treated as if the feature had omitted from the style rule. If a given value is outside the range supported by a given font, the value is ignored. These values never apply to generic font families, nor to families selected as part of system font fallback. Values that behave this way are marked as font specific.

Syntax

font-variant-alternates : 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>) ]

Values

normal

None of the features listed below are enabled.

stylistic(<feature-value-name>)

Enables display of stylistic alternates (font specific, OpenType feature: salt <feature-value-name>).

historical-forms

Enables display of historical forms (OpenType feature: hist).

styleset(<feature-value-name>#)

Enables display with stylistic sets (font specific, OpenType feature: ss<feature-index> OpenType currently defines ss01 through ss20).

character-variant(<feature-value-name>#)

Enables display of specific character variants (font specific, OpenType feature: cv<feature-index> OpenType currently defines cv01 through cv99).

swash(<feature-value-name>)

Enables display of swash glyphs (font specific, OpenType feature: swsh <feature-index>, cswh <feature-index>).

ornaments(<feature-value-name>)

Enables replacement of default glyphs with ornaments, if provided in the font (font specific, OpenType feature: ornm <feature-index>). Some fonts may offer ornament glyphs as alternates for a wide collection of characters; however, displaying arbitrary characters (e.g., alphanumerics) as ornaments is poor practice as it distorts the semantics of the data. Font designers are encouraged to encode all ornaments (except those explicitly encoded in the Unicode Dingbats blocks, etc.) as alternates for the bullet character (U+2022) to allow authors to select the desired glyph using <feature-value-name>.

annotation(<feature-value-name>)

Enables display of alternate annotation forms (font specific, OpenType feature: nalt <feature-index>).

Examples

@font-feature-values Jupiter Sans {
  @swash delicate 1, flowing 2;
}
h2 { font-family: Jupiter Sans, sans-serif; }
/* show the second swash variant in h2 headings */
h2:first-letter { font-variant-alternates: swash(flowing); }