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 kontextuellen Formen im Textinhalt der Elemente verwendet werden, auf die sie angewendet wird. Dies führt zu harmonisierteren 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
/* 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 eine oder mehrere der unten aufgeführten Wertetypen 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 legt fest, dass alle Ligaturen und kontextuellen Formen deaktiviert sind, selbst die gängigen.
<common-lig-values>
-
Diese Werte steuern die häufigsten Ligaturen, wie z.B. für
fi
,ffi
,th
oder ähnliche. Sie entsprechen den OpenType-Wertenliga
undclig
. Zwei Werte sind möglich:common-ligatures
aktiviert diese Ligaturen. Beachten Sie, dass das Schlüsselwortnormal
diese Ligaturen aktiviert.no-common-ligatures
deaktiviert diese Ligaturen.
<discretionary-lig-values>
-
Diese Werte steuern spezifische Ligaturen, die schriftartenspezifisch sind und vom Schriftdesigner definiert werden. 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üsselwortnormal
diese Ligaturen in der Regel deaktiviert.
<historical-lig-values>
-
Diese Werte steuern die historically genutzten Ligaturen, wie z.B. das deutsche tz-Digraph, das als ꜩ angezeigt 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üsselwortnormal
diese Ligaturen in der Regel deaktiviert.
<contextual-alt-values>
-
Diese Werte steuern, ob Buchstaben sich an ihren Kontext anpassen, das heißt, ob sie sich an die umgebenden 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üsselwortnormal
diese Ligaturen normalerweise ebenfalls 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 kontextuellen Formen
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
Spezifikationen
Specification |
---|
CSS Fonts Module Level 4> # font-variant-ligatures-prop> |
Browser-Kompatibilität
Loading…