font-variant-ligatures

/* 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 einem oder mehreren der unten aufgeführten Wertetypen angegeben. Mehrere Werte werden durch Leerzeichen getrennt.

normal

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

none

Dieses Schlüsselwort spezifiziert, dass alle Ligaturen und Kontextformen deaktiviert sind, selbst die üblichen.

<common-lig-values>

Diese Werte steuern die häufigsten Ligaturen, wie z.B. 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 kontrollieren spezielle 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 diese Ligaturen normalerweise deaktiviert.

<historical-lig-values>

Diese Werte steuern die historisch verwendeten Ligaturen, wie sie in alten Büchern vorkommen, z.B. 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 diese Ligaturen normalerweise deaktiviert.

<contextual-alt-values>

Diese Werte steuern, ob Buchstaben sich ihrem Kontext anpassen, d.h. ob sie sich an die 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 normalerweise auch aktiviert.
• no-contextual verhindert deren Verwendung.

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  

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

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

• font-variant
• font-variant-caps
• font-variant-emoji
• font-variant-east-asian
• font-variant-numeric
• font-variant-position
• CSS Fonts Modul