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 January 2020.

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

Probieren Sie es aus

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 font-variant-ligatures Eigenschaft wird als normal, none oder als eine oder mehrere der unten aufgeführten anderen Werttypen angegeben. Mehrere Werte werden durch Leerzeichen getrennt.

Werte

normal

Dieses Schlüsselwort aktiviert die üblichen Ligaturen und kontextuellen Formen, die für eine korrekte Darstellung erforderlich sind. Die aktivierten Ligaturen und Formen hängen von der Schriftart, der Sprache und der Art des Schriftsystems ab. Dies ist der Standardwert.

none

Dieses Schlüsselwort gibt an, dass alle Ligaturen und kontextuellen Formen deaktiviert sind, selbst die gebräuchlichen.

<common-lig-values>

Diese Werte steuern die gebräuchlichsten Ligaturen, wie für fi, ffi, th oder ähnliche. Sie entsprechen den OpenType-Werten liga und clig. Zwei Werte sind möglich:

  • common-ligatures aktiviert diese Ligaturen. Beachten Sie, dass das Schlüsselwort normal diese Ligaturen aktiviert.
  • no-common-ligatures deaktiviert diese Ligaturen.
<discretionary-lig-values>

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

  • discretionary-ligatures aktiviert diese Ligaturen.
  • no-discretionary-ligatures deaktiviert die Ligaturen. Beachten Sie, dass das Schlüsselwort normal normalerweise diese Ligaturen deaktiviert.
<historical-lig-values>

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

  • historical-ligatures aktiviert diese Ligaturen.
  • no-historical-ligatures deaktiviert die Ligaturen. Beachten Sie, dass das Schlüsselwort normal normalerweise diese Ligaturen deaktiviert.
<contextual-alt-values>

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

  • contextual gibt an, dass kontextuelle Alternativen verwendet werden sollen. Beachten Sie, dass das Schlüsselwort normal normalerweise auch diese Ligaturen aktiviert.
  • no-contextual verhindert deren Verwendung.

Formale Definition

Anfangswertnormal
Anwendbar aufall elements and text. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

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

Festlegung von Schriftligaturen und kontextuellen Formen

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-variant-ligatures
common-ligatures
contextual
discretionary-ligatures
historical-ligatures
no-common-ligatures
no-contextual
no-discretionary-ligatures
no-historical-ligatures
none
normal

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch