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 font-variant-alternates CSS Eigenschaft 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 ein bestimmtes Schrifttyp eine menschenlesbare Bezeichnung mit einem numerischen Index zu verknüpfen, der ein bestimmtes OpenType-Schriftmerkmal steuert. Für Funktionen, die alternative Glyphen auswählen (stylistic, styleset, character-variant, swash, ornament oder annotation), kann die font-variant-alternates Eigenschaft dann den menschenlesbaren Namen referenzieren, um das entsprechende Merkmal anzuwenden.

Dies ermöglicht CSS-Regeln, alternative Glyphen zu aktivieren, ohne die spezifischen Indexwerte wissen zu müssen, die eine bestimmte Schriftart verwendet, um sie zu steuern.

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 in zwei Formen verwendet werden:

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

Werte

normal

Dieses Schlüsselwort deaktiviert alternative Glyphen.

historical-forms

Dieses Schlüsselwort aktiviert historische Formen — Glyphen, die in der Vergangenheit gebräuchlich waren, aber heute nicht mehr. Es entspricht dem OpenType-Wert hist.

stylistic()

Diese Funktion aktiviert stilistische Alternativen für einzelne Zeichen. Der Parameter ist ein schriftartspezifischer Name, der einer Nummer zugeordnet ist. Er entspricht dem OpenType-Wert salt, wie salt 2.

styleset()

Diese Funktion aktiviert stilistische Alternativen für Zeichengruppen. Der Parameter ist ein schriftartspezifischer Name, der einer Nummer zugeordnet ist. Er entspricht dem OpenType-Wert ssXY, wie ss02.

character-variant()

Diese Funktion aktiviert spezifische stilistische Alternativen für Zeichen. Sie ähnelt styleset(), erstellt jedoch keine zusammenhängenden Glyphen für eine Gruppe von Zeichen; einzelne Zeichen haben unabhängige und nicht unbedingt zusammenhängende Stile. Der Parameter ist ein schriftartspezifischer Name, der einer Nummer zugeordnet ist. Er entspricht dem OpenType-Wert cvXY, wie cv02.

swash()

Diese Funktion aktiviert swash Glyphen. Der Parameter ist ein schriftartspezifischer Name, der einer Nummer zugeordnet ist. Er entspricht den OpenType-Werten swsh und cswh, wie swsh 2 und cswh 2.

ornaments()

Diese Funktion aktiviert Ornamente, wie Fleurons und andere Dingbat-Glyphen. Der Parameter ist ein schriftartspezifischer Name, der einer Nummer zugeordnet ist. Er entspricht dem OpenType-Wert ornm, wie ornm 2.

Hinweis: Um die Textsemantik zu bewahren, sollten Schriftgestalter Ornamente, die nicht den Unicode-Dingbat-Zeichen entsprechen, als ornamentale Varianten des Aufzählungszeichens (U+2022) einfügen. Beachten Sie, dass einige vorhandene Schriftarten diesen Rat nicht befolgen.

annotation()

Diese Funktion aktiviert Annotationen, wie umrandete Ziffern oder invertierte Zeichen. Der Parameter ist ein schriftartspezifischer Name, der einer Nummer zugeordnet ist. Er entspricht dem OpenType-Wert nalt, wie nalt 2.

Formale Definition

Anfangswertnormal
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

Aktivieren von Swash-Glyphen

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, außer dass das CSS, das das Merkmal anwendet, den benötigten Indexwert für diese spezielle Schriftart nicht enthalten oder sogar wissen 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", cursive;
  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

Siehe auch