font-variant-alternates CSS property

Syntax

/* 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;

Werte

Diese Eigenschaft wird als normal oder als durch Leerzeichen getrennte Liste der folgenden Werte angegeben:

normal

Dieses Schlüsselwort deaktiviert alternative Glyphen.

historical-forms

Dieses Schlüsselwort aktiviert historische Formen — Glyphen, die in der Vergangenheit häufig waren, heute aber 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 Zahl zugeordnet ist. Es entspricht dem OpenType-Wert salt, wie salt 2.

styleset()

Diese Funktion aktiviert 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 aktiviert spezifische stilistische Alternativen für Zeichen. Es ähnelt styleset(), erzeugt aber 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 aktiviert 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 aktiviert 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 Textsemantik zu bewahren, sollten Schriftgestalter Ornamente, die nicht mit Unicode-Dingbat-Zeichen übereinstimmen, als ornamentale Varianten des Aufzählungszeichenzeichens (U+2022) einschließen. Beachten Sie, dass einige bestehende Schriftarten diesem Rat nicht folgen.

annotation()

Diese Funktion aktiviert Annotationen, wie umkreiste 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

Formale Syntax

font-variant-alternates = 
  normal                                              |
  [ stylistic( <font-feature-value-name> ) || historical-forms || styleset( <font-feature-value-name># ) || character-variant( <font-feature-value-name># ) || swash( <font-feature-value-name> ) || ornaments( <font-feature-value-name> ) || annotation( <font-feature-value-name> ) ]  

<font-feature-value-name> = 
  <ident>  

Beispiele

Swash-Glyphen aktivieren

In diesem Beispiel verwenden wir die @font-feature-values-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 diesen Namen dann 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 die Funktion anwendet, den benötigten Indexwert für diese spezielle Schriftart nicht einschließen oder sogar kennen muss.

HTML

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

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

Browser-Kompatibilität

Siehe auch

• font-variant
• font-variant-caps
• font-variant-east-asian
• font-variant-emoji
• font-variant-ligatures
• font-variant-numeric
• font-variant-position
• @font-feature-values
• font-feature-settings