font-variant-alternates

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨März 2023⁩.

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

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 eine bestimmte OpenType-Schriftfunktion steuert. Für Funktionen, die alternative Glyphen auswählen (stylistic, styleset, character-variant, swash, ornament oder annotation), kann die font-variant-alternates Eigenschaft den menschenlesbaren Namen referenzieren, um die zugehörige Funktion anzuwenden.

Dies ermöglicht CSS-Regeln, alternative Glyphen zu aktivieren, ohne die spezifischen Indexwerte kennen zu müssen, die eine bestimmte Schriftart zur Steuerung dieser 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 gebräuchlich waren, heute jedoch nicht mehr. Es entspricht dem OpenType-Wert hist.
stylistic(): Diese Funktion aktiviert stilistische Alternativen für einzelne Zeichen. Der Parameter ist ein schriftartenspezifischer Name, der einer Zahl zugeordnet wird. Es entspricht dem OpenType-Wert salt, wie salt 2.
styleset(): Diese Funktion aktiviert stilistische Alternativen für Zeichensätze. Der Parameter ist ein schriftartenspezifischer Name, der einer Zahl zugeordnet wird. Es entspricht dem OpenType-Wert ssXY, wie ss02.
character-variant(): Diese Funktion aktiviert spezifische stilistische Alternativen für Zeichen. Sie ist ähnlich wie styleset(), erstellt jedoch keine kohärenten Glyphen für einen Zeichensatz; einzelne Zeichen werden unabhängige und nicht notwendigerweise kohärente Stile haben. Der Parameter ist ein schriftartenspezifischer Name, der einer Zahl zugeordnet wird. Es entspricht dem OpenType-Wert cvXY, wie cv02.
swash(): Diese Funktion aktiviert Schweif Glyphen. Der Parameter ist ein schriftartenspezifischer Name, der einer Zahl zugeordnet wird. Es 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 schriftartenspezifischer Name, der einer Zahl zugeordnet wird. Es entspricht dem OpenType-Wert ornm, wie ornm 2.

Hinweis: Um die Textsemantik zu bewahren, sollten Schriftgestalter Ornamente, die nicht mit Unicode Dingbat-Zeichen übereinstimmen, als ornamental Varianten des Bullet-Zeichens (U+2022) einschließen. Beachten Sie, dass einige bestehende Schriften diesem Rat nicht folgen.
annotation(): Diese Funktion aktiviert Annotationen, wie umkreiste Ziffern oder umgekehrte Zeichen. Der Parameter ist ein schriftartenspezifischer Name, der einer Zahl zugeordnet wird. Es entspricht dem OpenType-Wert nalt, wie nalt 2.

Formale Definition

Anfangswert	`normal`
Anwendbar auf	all elements and text. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	diskret

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

Schweif-Glyphen aktivieren

In diesem Beispiel verwenden wir die @font-feature-values At-Regel, um einen Namen für die swash Funktion 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 Schweife für diese Schriftart zu aktivieren. Dies ist gleichbedeutend mit einer Zeile wie font-feature-settings: "swsh" 1, mit dem Unterschied, dass das CSS, das die Funktion anwendet, den für diese bestimmte Schriftart erforderlichen Indexwert nicht enthalten oder 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("/shared-assets/fonts/monte-carlo/monte-carlo-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

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden