font-variant-ligatures

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Januar 2020⁩.

Die font-variant-ligatures CSS-Eigenschaft steuert, welche Ligaturen und Kontextformen im Textinhalt der Elemente verwendet werden, auf die sie angewendet wird. Dies führt zu harmonischeren Formen im resultierenden Text.

Probieren Sie es aus

font-variant-ligatures: normal;

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

font-variant-ligatures: common-ligatures;

<section id="default-example">
  <div id="example-element">
    <p>Difficult waffles</p>
  </div>
</section>

@font-face {
  font-family: "Fira Sans";
  src:
    local("FiraSans-Regular"),
    url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

section {
  font-family: "Fira Sans", sans-serif;
  margin-top: 10px;
  font-size: 1.5em;
}

Syntax

css

/* Keyword values */
font-variant-ligatures: normal;
font-variant-ligatures: none;
font-variant-ligatures: common-ligatures; /* <common-lig-values> */
font-variant-ligatures: no-common-ligatures; /* <common-lig-values> */
font-variant-ligatures: discretionary-ligatures; /* <discretionary-lig-values> */
font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */
font-variant-ligatures: historical-ligatures; /* <historical-lig-values> */
font-variant-ligatures: no-historical-ligatures; /* <historical-lig-values> */
font-variant-ligatures: contextual; /* <contextual-alt-values> */
font-variant-ligatures: no-contextual; /* <contextual-alt-values> */

/* Two keyword values */
font-variant-ligatures: no-contextual common-ligatures;

/* Four keyword values */
font-variant-ligatures: common-ligatures no-discretionary-ligatures
  historical-ligatures contextual;

/* Global values */
font-variant-ligatures: inherit;
font-variant-ligatures: initial;
font-variant-ligatures: revert;
font-variant-ligatures: revert-layer;
font-variant-ligatures: unset;

Die Eigenschaft font-variant-ligatures wird als normal, none oder als eine oder mehrere der unten aufgeführten Wertetypen angegeben. Leerzeichen trennen mehrere Werte.

Werte

normal

Dieses Schlüsselwort aktiviert die üblichen Ligaturen und Kontextformen, die für eine korrekte Darstellung benötigt werden. Die aktivierten Ligaturen und Formen hängen von der Schriftart, der Sprache und der Art des Schriftsatzes ab. Dies ist der Standardwert.

none

Dieses Schlüsselwort legt fest, dass alle Ligaturen und Kontextformen deaktiviert sind, auch die allgemeinen.

<common-lig-values>

Diese Werte steuern die häufigsten Ligaturen, wie zum Beispiel für fi, ffi, th oder ähnliches. Sie entsprechen den OpenType-Werten liga und clig. Zwei Werte sind möglich:

common-ligatures, womit diese Ligaturen aktiviert werden. Beachten Sie, dass das Schlüsselwort normal diese Ligaturen aktiviert.
no-common-ligatures, womit diese Ligaturen deaktiviert werden.

<discretionary-lig-values>

Diese Werte steuern spezifische Ligaturen, die spezifisch für die Schriftart und vom Schriftgestalter definiert sind. Sie entsprechen den OpenType-Werten dlig. Zwei Werte sind möglich:

discretionary-ligatures, womit diese Ligaturen aktiviert werden.
no-discretionary-ligatures, womit die Ligaturen deaktiviert werden. Beachten Sie, dass das Schlüsselwort normal diese Ligaturen normalerweise deaktiviert.

<historical-lig-values>

Diese Werte steuern die historisch verwendeten Ligaturen, wie sie in alten Büchern vorkommen, wie etwa beim deutschen tz-Digraph, der als ꜩ dargestellt wird. Sie entsprechen den OpenType-Werten hlig. Zwei Werte sind möglich:

historical-ligatures, womit diese Ligaturen aktiviert werden.
no-historical-ligatures, womit die Ligaturen deaktiviert werden. Beachten Sie, dass das Schlüsselwort normal diese Ligaturen normalerweise deaktiviert.

<contextual-alt-values>

Diese Werte steuern, ob Buchstaben sich ihrem Kontext anpassen, das heißt, ob sie sich den umliegenden Buchstaben anpassen. Diese Werte entsprechen den OpenType-Werten calt. Zwei Werte sind möglich:

contextual, gibt an, dass die kontextuellen Alternativen verwendet werden sollen. Beachten Sie, dass das Schlüsselwort normal diese Ligaturen in der Regel auch aktiviert.
no-contextual, verhindert deren Verwendung.

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-ligatures = 
  normal                                              |
  none                                                |
  [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]  

<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

Beispiele

Festlegen von Schriftligaturen und Kontextformen

HTML

html

<link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet" />
<p class="normal">
  normal<br />
  if fi ff tf ft jf fj
</p>
<p class="none">
  none<br />
  if fi ff tf ft jf fj
</p>
<p class="common-ligatures">
  common-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-common-ligatures">
  no-common-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="discretionary-ligatures">
  discretionary-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-discretionary-ligatures">
  no-discretionary-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="historical-ligatures">
  historical-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-historical-ligatures">
  no-historical-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="contextual">
  contextual<br />
  if fi ff tf ft jf fj
</p>
<p class="no-contextual">
  no-contextual<br />
  if fi ff tf ft jf fj
</p>

CSS

css

p {
  font-family: "Lora", serif;
}
.normal {
  font-variant-ligatures: normal;
}

.none {
  font-variant-ligatures: none;
}

.common-ligatures {
  font-variant-ligatures: common-ligatures;
}

.no-common-ligatures {
  font-variant-ligatures: no-common-ligatures;
}

.discretionary-ligatures {
  font-variant-ligatures: discretionary-ligatures;
}

.no-discretionary-ligatures {
  font-variant-ligatures: no-discretionary-ligatures;
}

.historical-ligatures {
  font-variant-ligatures: historical-ligatures;
}

.no-historical-ligatures {
  font-variant-ligatures: no-historical-ligatures;
}

.contextual {
  font-variant-ligatures: contextual;
}

.no-contextual {
  font-variant-ligatures: no-contextual;
}

Ergebnis

Spezifikationen

Specification
CSS Fonts Module Level 4 # font-variant-ligatures-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