W3docs
de
Anmelden

CSS font-variant-ligatures Eigenschaft

Die Eigenschaft font-variant-ligatures steuert die Ligaturen einer Schrift. Werte und Beispiele ansehen.

Die CSS-Eigenschaft font-variant-ligatures legt fest, welche Ligaturen und kontextuellen Formen eine Schrift verwendet. Eine Ligatur ist ein einzelnes Glyphe, das ein Schriftbild als Ersatz für zwei oder mehr Zeichen einfügt, die andernfalls kollidieren oder unschön nebeneinander wirken würden – das klassische Beispiel ist das fi-Paar, bei dem der Punkt des i mit dem Haken des f kollidiert.

Ligaturen sind ein OpenType-Feature, das in der Schriftdatei enthalten ist. Diese Eigenschaft erlaubt es, die verfügbaren Ligaturen ein- oder auszuschalten; enthält die Schrift eine bestimmte Ligatur nicht, hat die Eigenschaft keine sichtbare Wirkung. Daher ändert font-variant-ligatures nur die Darstellung, niemals den zugrunde liegenden Text – Kopieren, Suchen und Screenreader sehen weiterhin die ursprünglichen Zeichen.

font-variant-ligatures akzeptiert jeweils einen Schlüsselwert aus den folgenden Gruppen (in beliebiger Reihenfolge kombinierbar):

  • normal — die Schrift entscheidet selbst (Standard).
  • none — alle Ligaturen und kontextuellen Formen werden deaktiviert.
  • <common-lig-values> — common-ligatures / no-common-ligatures
  • <discretionary-lig-values> — discretionary-ligatures / no-discretionary-ligatures
  • <historical-lig-values> — historical-ligatures / no-historical-ligatures
  • <contextual-alt-values> — contextual / no-contextual
Anfangswertnormal
Gilt fürAlle Elemente. Gilt auch für ::first-letter und ::first-line.
VererbtJa.
AnimierbarNein.
VersionCSS3
DOM-Syntaxobject.style.fontVariantLigatures = "normal";

Syntax

font-variant-ligatures: normal | none | <common-lig-values> | <discretionary-lig-values> | <historical-lig-values> | <contextual-alt-values>;

Mehrere Schlüsselwörter aus verschiedenen Gruppen können zusammen angegeben werden. Dieses Beispiel behält gewöhnliche Ligaturen bei, aktiviert dekorative und deaktiviert kontextuelle Verbindungen:

font-variant-ligatures: common-ligatures discretionary-ligatures no-contextual;

Beispiel der font-variant-ligatures-Eigenschaft

Die beiden Spans unten rendern dieselben Zeichen mit derselben Schrift. Im ersten Fall sind gewöhnliche Ligaturen deaktiviert, sodass f und i als zwei separate Glyphen erscheinen; im zweiten Fall sind sie aktiviert, sodass das Paar zu einer einzigen fi-Glyphe verbunden wird.

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document </title>
    <style>
      div {
        font-family: Lora, serif;
        font-size: 35vw;
      }
      .gray {
        font-variant-ligatures: no-common-ligatures;
        color: #ccc;
      }
      .blue {
        font-variant-ligatures: common-ligatures;
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Font-variant-ligatures property example</h2>
    <div>
      <span class="gray">fi</span>
      <span class="blue">fi</span>
    </div>
  </body>
</html>
Probier es selbst »

Ergebnis

![CSS font-variant-ligatures Eigenschaft](/uploads/media/default/0001/03/fc947bebf8b5cb8a0a41ea56ea12d1fd303a936c.png "fi gerendert mit und ohne gewöhnliche Ligaturen" width="420" height="200")

Arten von Ligaturen

CSS unterscheidet vier Familien von Ligaturen und kontextuellen Formen, die alle am weit verbreiteten OpenType-Format ausgerichtet sind. Jede Familie hat ihr eigenes Schlüsselwortpaar, sodass sie unabhängig voneinander umgeschaltet werden können.

Gewöhnliche Ligaturen

Gewöhnliche Ligaturen treten auf, wenn zwei Zeichen ansonsten „zusammenstoßen" würden – das Schulbeispiel ist das Paar f + i in Kleinbuchstaben. Ihre Verbindung macht den Text angenehmer zu lesen, weshalb die meisten Schriften und Browser gewöhnliche Ligaturen standardmäßig aktivieren. Explizit umschalten mit:

/* Enable common ligatures (the default) */
font-variant-ligatures: common-ligatures;

/* Disable common ligatures */
font-variant-ligatures: no-common-ligatures;

Dekorative Ligaturen

Dekorative Ligaturen (auch Ermessensligaturen genannt) dienen der visuellen Verschönerung statt der Lesbarkeit – man denke an eine ornamentale ct- oder st-Verbindung in einer Display-Schrift. Sie sind standardmäßig ausgeschaltet und werden nur dort eingesetzt, wo die Dekoration gewünscht ist:

/* Enable discretionary ligatures */
font-variant-ligatures: discretionary-ligatures;

/* Disable discretionary ligatures */
font-variant-ligatures: no-discretionary-ligatures;

Historische Ligaturen

Historische Ligaturen reproduzieren Formen, die einst in alten Büchern und Manuskripten verbreitet waren, wie zum Beispiel das Lang-s (ſ)-Kombinationen. Wie dekorative Ligaturen sind sie dekorativ und standardmäßig ausgeschaltet:

/* Enable historical ligatures */
font-variant-ligatures: historical-ligatures;

/* Disable historical ligatures */
font-variant-ligatures: no-historical-ligatures;

Kontextuelle Alternativen

Kontextuelle Alternativen verbessern die Lesbarkeit, indem sie eine Glyphe wählen, die fließend an ihre Nachbarn anschließt. Sie fallen am stärksten bei verbundenen Schriften auf (Handschriftschriften, Arabisch), wo Striche von einem Zeichen zum nächsten kontinuierlich fließen müssen. Umschalten mit:

/* Enable contextual alternates */
font-variant-ligatures: contextual;

/* Disable contextual alternates */
font-variant-ligatures: no-contextual;

Werte

WertBeschreibung
normalDie Aktivierung von Formen und Ligaturen hängt von der Schrift, der Sprache und der Schriftart ab. Dies ist der Standardwert dieser Eigenschaft.
noneAlle Ligaturen und kontextuellen Formen sind deaktiviert.
<common-lig-values>Steuert alle Ligaturen.
<discretionary-lig-values>Steuert bestimmte Ligaturen.
<historical-lig-values>Steuert Ligaturen, die in alten Büchern verwendet werden.
<contextual-alt-values>Steuert die Anpassung der Buchstaben an ihren Kontext (contextual / no-contextual).
initialSetzt die Eigenschaft auf ihren Standardwert (normal).
inheritErbt die Eigenschaft vom übergeordneten Element.

Wann es verwendet werden sollte

Meistens ist normal die richtige Wahl – der Schriftgestalter hat bereits sinnvolle Standardeinstellungen gewählt. Explizite Werte sind sinnvoll, wenn:

  • Eine Display- oder Logo-Überschrift dekorative discretionary-ligatures benötigt, die sie sonst nicht erhalten würde.
  • Ein Monospace-/Code-Block Ligaturen rendert, die nicht gewünscht sind (manche Editoren verwandeln != in eine einzelne Glyphe); none oder no-common-ligatures stellt die wörtlichen Zeichen wieder her.
  • text-rendering: optimizeSpeed gesetzt ist oder Text animiert wird und die Ligatur-Substitution ein Flimmern verursacht – das Deaktivieren kann das Rendering stabilisieren.

Verwandte Eigenschaften

Übung

Übung
Was steuert die CSS-Eigenschaft 'font-variant-ligatures'?
Was steuert die CSS-Eigenschaft 'font-variant-ligatures'?
Was this page helpful?