font-variant-alternates

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die CSS-Eigenschaft font-variant-alternates steuert die Verwendung von alternativen Glyphen. Diese alternativen Glyphen können durch alternative Namen referenziert werden, die in @font-feature-values definiert sind.

Die @font-feature-values At-Regel kann verwendet werden, um für eine gegebene Schriftart einen menschenlesbaren Namen mit einem numerischen Index zu verknüpfen, der ein bestimmtes OpenType-Schriftmerkmal steuert. Für Merkmale, die alternative Glyphen auswählen (stylistic, styleset, character-variant, swash, ornament oder annotation), kann die Eigenschaft font-variant-alternates dann den menschenlesbaren Namen referenzieren, um das zugehörige Merkmal anzuwenden.

Dies ermöglicht es CSS-Regeln, alternative Glyphen zu aktivieren, ohne die spezifischen Indexwerte zu kennen, die eine bestimmte Schriftart zur Steuerung verwendet.

Syntax

css
/* 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: inherit;
font-variant-alternates: initial;
font-variant-alternates: revert;
font-variant-alternates: revert-layer;
font-variant-alternates: unset;

Diese Eigenschaft kann eine von zwei Formen annehmen:

  • entweder das Schlüsselwort normal
  • oder eines oder mehrere der unten aufgeführten Schlüsselwörter und Funktionen, durch Leerzeichen getrennt, in beliebiger Reihenfolge.

Werte

normal

Dieses Schlüsselwort deaktiviert alternative Glyphen.

historical-forms

Dieses Schlüsselwort aktiviert historische Formen — Glyphen, die in der Vergangenheit häufig, aber heute nicht mehr üblich sind. Es entspricht dem OpenType-Wert hist.

stylistic()

Diese Funktion ermöglicht stilistische Alternativen für einzelne Zeichen. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Es entspricht dem OpenType-Wert salt, wie salt 2.

styleset()

Diese Funktion ermöglicht stilistische Alternativen für Zeichensätze. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Es entspricht dem OpenType-Wert ssXY, wie ss02.

character-variant()

Diese Funktion ermöglicht spezifische stilistische Alternativen für Zeichen. Sie ist ähnlich wie styleset(), erzeugt jedoch keine kohärenten Glyphen für einen Zeichensatz; einzelne Zeichen haben unabhängige und nicht notwendigerweise kohärente Stile. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Es entspricht dem OpenType-Wert cvXY, wie cv02.

swash()

Diese Funktion ermöglicht Swash-Glyphen. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Es entspricht den OpenType-Werten swsh und cswh, wie swsh 2 und cswh 2.

ornaments()

Diese Funktion ermöglicht Ornamente, wie Fleurons und andere Dingbat-Glyphen. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Es entspricht dem OpenType-Wert ornm, wie ornm 2.

Hinweis: Um die Semantik des Textes zu bewahren, sollten Schriftgestalter Ornamente, die nicht mit Unicode-Dingbat-Zeichen übereinstimmen, als ornamental Varianten des Aufzählungszeichenzeichens (U+2022) aufnehmen. Seien Sie sich bewusst, dass einige vorhandene Schriften diesen Rat nicht befolgen.

annotation()

Diese Funktion ermöglicht Anmerkungen, wie eingekreiste Ziffern oder invertierte Zeichen. Der Parameter ist ein schriftartspezifischer Name, der einer Zahl zugeordnet ist. Es entspricht dem OpenType-Wert nalt, wie nalt 2.

Formale Definition

Initialer Wertnormal
Anwendbar aufall elements and text. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale 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> ) ]  

<feature-value-name> = 
  <ident>

Beispiele

Swash-Glyphen aktivieren

In diesem Beispiel verwenden wir die @font-feature-values At-Regel, um einen Namen für das swash-Merkmal der MonteCarlo Schriftart zu definieren. Die Regel ordnet den Namen "fancy" dem Indexwert 1 zu.

Wir können dann diesen Namen innerhalb von font-variant-alternates verwenden, um Swashes für diese Schriftart zu aktivieren. Dies entspricht einer Zeile wie font-feature-settings: "swsh" 1, wobei das CSS, das das Merkmal anwendet, den benötigten Indexwert für diese spezielle Schriftart nicht enthalten oder sogar kennen muss.

HTML

html
<p>A Fancy Swash</p>
<p class="variant">A Fancy Swash</p>

CSS

css
@font-face {
  font-family: MonteCarlo;
  src: url("montecarlo-regular.woff2");
}

@font-feature-values "MonteCarlo" {
  @swash {
    fancy: 1;
  }
}

p {
  font-family: "MonteCarlo";
  font-size: 3rem;
  margin: 0.7rem 3rem;
}

.variant {
  font-variant-alternates: swash(fancy);
}

Ergebnis

Spezifikationen

Specification
CSS Fonts Module Level 4
# font-variant-alternates-prop

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch