Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!
Sie können den Artikel auch auf English (US) lesen.

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.

/* Keyword values */
font-variant-alternates: normal;
font-variant-alternates: historical-forms;

/* Functional notation values */
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;

The @font-feature-values at-rule can define names for alternative glyph functions (stylistic, styleset, character-variant, swash, ornament or annotation), associating the name with OpenType parameters. This property allows those human-readable names (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

This property may take one of two forms:

  • either the keyword normal
  • or one or more of the other keywords and functions listed below, space-separated, in any order.

Values

normal
This keyword deactivates alternate glyphs.
historical-forms
This keyword enables historical forms — glyphs that were common in the past but not today. It corresponds to the OpenType value hist.
stylistic()
This function enables stylistic alternates for individual characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value salt, like salt 2.
styleset()
This function enables stylistic alternatives for sets of characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value ssXY, like ss02.
character-variant()
This function enables specific stylistic alternatives for characters. It is similar to styleset(), but doesn't create coherent glyphs for a set of characters; individual characters will have independent and not necessarily coherent styles. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value cvXY, like cv02.
swash()
This function enables swash glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType values swsh and cswh, like swsh 2 and cswh 2.
ornaments()
This function enables ornaments, like fleurons and other dingbat glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value ornm, like ornm 2.
Note: In order to preserve text semantics, font designers should include ornaments that don't match Unicode dingbat characters as ornamental variants of the bullet character (U+2022). Be aware that some existing fonts don't follow this advice.
annotation()
This function enables annotations, like circled digits or inverted characters. The parameter is a font-specific name 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

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

Result

Note: You need to install the OpenType font Leitura Display Swashes 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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support No No

34

24 — 341

No No No
annotation() No No

34

24 — 341

No No No
character-variant() No No

34

24 — 341

No No No
ornaments() No No

34

24 — 341

No No No
styleset() No No

34

24 — 341

No No No
stylistic() No No

34

24 — 341

No No No
swash() No No

34

24 — 341

No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic support No No No

34

24 — 341

No No No
annotation() No No No

34

24 — 341

No No No
character-variant() No No No

34

24 — 341

No No No
ornaments() No No No

34

24 — 341

No No No
styleset() No No No

34

24 — 341

No No No
stylistic() No No No

34

24 — 341

No No No
swash() No No No

34

24 — 341

No No No

1. From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
 Mitwirkende an dieser Seite: mfluehr, fscholz, wbamberg, KadirTopal, Tigt, duncanmcdonald, Sebastianz, jsx, teoli
 Zuletzt aktualisiert von: mfluehr,