CSS font-variant-alternates Eigenschaft

Die CSS-Eigenschaft font-variant-alternates steuert die Auswahl alternativer Glyphen — also besonderer Zeichenformen (Swash-Zeichen, Ornamente, stilistische Zeichensätze, historische Formen usw.), die eine OpenType-Schriftart zusätzlich zu ihren Standardzeichen bereitstellen kann.

Diese Seite erklärt, was alternative Glyphen sind, wie man sie aktiviert, wie jede Funktion auf OpenType-Features abgebildet wird und welche Fallstricke zu beachten sind.

Warum alternative Glyphen verwenden?

Viele hochwertige OpenType-Schriften liefern zusätzliche Varianten bestimmter Buchstaben. Ein Swash-Zeichen kann einem Großbuchstaben eine dekorative Verzierung hinzufügen; ein stilistischer Zeichensatz kann eine ganze Gruppe von Buchstaben in einem kalligraphischen Stil erscheinen lassen; historische Formen können das lange „ſ" wiederherstellen, das in älteren Texten verwendet wurde. Standardmäßig rendert ein Browser die normale Glyphe — mit font-variant-alternates können Sie die alternativen Glyphen aktivieren, ohne die OpenType-Feature-Tags auf niedriger Ebene kennen zu müssen.

Diese Eigenschaft kommt dann zum Einsatz, wenn typografische Raffinesse erwünscht ist (Logos, Überschriften, redaktionelle Anzeigetexte) und die gewählte Schriftart tatsächlich alternative Glyphen enthält. Enthält die Schriftart keine Alternativen, hat die Eigenschaft keine sichtbare Wirkung.

Funktionsweise: `@font-feature-values`

Die meisten der nachfolgenden Funktionen (stylistic(), styleset(), character-variant(), swash(), ornaments(), annotation()) nehmen einen Namen statt einer Zahl entgegen. Diese lesbaren Namen werden einmalig mit der At-Regel @font-feature-values definiert und anschließend im Stylesheet referenziert. Diese Indirektion ermöglicht es, den sonst undurchsichtigen Feature-Indizes einer Schriftart aussagekräftige Namen wie fancy oder circled zu geben.

/* 1. Map a readable name to a feature index, per font family */
@font-feature-values "Leitura Display Swashes" {
  @swash { fancy: 1; }
}

/* 2. Reference the name in font-variant-alternates */
.title {
  font-family: "Leitura Display Swashes";
  font-variant-alternates: swash(fancy);
}

Eine Ausnahme bildet historical-forms: Dies ist ein einfaches Schlüsselwort und benötigt keinen @font-feature-values-Eintrag.

Anfangswert	normal
Gilt für	Alle Elemente. Gilt auch für ::first-letter und ::first-line.
Vererbbar	Ja.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.fontVariantAlternates = "normal";

Syntax

Syntax der CSS-Eigenschaft font-variant-alternates

font-variant-alternates: normal | historical-forms | stylistic() | styleset() | character-variant() | swash() | ornaments() | annotation();

Beispiel der Eigenschaft font-variant-alternates:

Beispiel der CSS-Eigenschaft font-variant-alternates

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @font-feature-values "Leitura Display Swashes" {
        @swash {
          fancy: 1;
        }
      }
      p {
        font-size: 2rem;
      }
      .variant {
        font-family: Leitura Display Swashes;
        font-variant-alternates: swash(fancy);
      }
    </style>
  </head>
  <body>
    <h2>Font-variant-alternates property example</h2>
    <p>This paragraph uses the swash alternate.</p>
    <p class="variant">This paragraph uses the swash alternate.</p>
  </body>
</html>

Probier es selbst »

Ergebnis

Werte

Wert	Beschreibung
normal	Keine der Funktionen ist aktiviert.
historical-forms	Aktiviert die Darstellung historischer Formen.
stylistic()	Aktiviert die Darstellung stilistischer Alternativen.
styleset()	Aktiviert die Darstellung mit stilistischen Zeichensätzen.
character-variant()	Aktiviert spezifische stilistische Alternativen für Zeichen.
swash()	Aktiviert Swash-Glyphen.
ornaments()	Aktiviert die Darstellung von Ornamenten.
annotation()	Aktiviert alternative Annotationsformen.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Sie können mehrere Funktionen in einer einzigen Deklaration kombinieren, indem Sie sie mit Leerzeichen trennen — zum Beispiel font-variant-alternates: stylistic(alt-a) styleset(my-set);. Nur das spezielle Schlüsselwort normal kann nicht mit den Funktionen kombiniert werden.

Zuordnung der Funktionen zu OpenType-Features

Falls Sie den Low-Level-Ansatz mit font-feature-settings kennen, zeigt diese Tabelle, welchem OpenType-Feature jede Funktion entspricht:

Funktion	OpenType-Feature	Typischer Einsatz
`historical-forms`	`hist`	Langes „ſ", archaische Buchstabenformen.
`stylistic()`	`salt`	Eine einzelne, namentlich gewählte alternative Glyphe.
`styleset()`	`ss01`–`ss20`	Ein koordinierter Satz von Alternativen.
`character-variant()`	`cv01`–`cv99`	Zeichenweise Alternativen, die unabhängig gesetzt werden können.
`swash()`	`swsh` / `cswh`	Dekorative Verzierungen an Buchstaben.
`ornaments()`	`ornm`	Dingbats und dekorative Zeichen.
`annotation()`	`nalt`	Eingekreiste oder eingerahmte Zahlen und Buchstaben.

Fallstricke

Die Schriftart muss die Alternative enthalten. Besitzt die aktive Schriftart keinen Swash oder stilistischen Zeichensatz, hat die Eigenschaft stillschweigend keine Wirkung — es gibt keine Ausweichglyphe.
Namen müssen zuerst deklariert werden. Eine Funktion wie swash(fancy) funktioniert nur, wenn fancy in einem @font-feature-values-Block für die entsprechende font-family zugeordnet ist.
Die Eigenschaft wird vererbt. Da die Eigenschaft vererbt wird, sollte sie nur am kleinsten Element gesetzt werden, das sie benötigt (oder bei Kindelementen auf normal zurückgesetzt werden), um dekorative Glyphen nicht in den umgebenden Text zu übertragen.

Browser-Kompatibilität

Browser	Unterstützung
Chrome	36+
Edge	79+
Firefox	34+
Safari	10+
Opera	23+

Übung

Welche Funktion hat die Eigenschaft 'font-variant-alternates' in CSS?

Sie hilft bei der Steuerung von Suchmaschinenoptimierungstechniken.Sie ermöglicht die Aktivierung von Stilzeichensätzen und Zeichenvarianten für OpenType-Schriften.Sie ändert die Textfarbe in einem CSS-Dokument.Sie ermöglicht die Auswahl normaler, Kapitälchen- oder keine gemeinsamen Ligaturen-Alternativen in einer Schrift.Sie wird verwendet, um das Thema einer Webseite festzulegen.