CSS-Eigenschaft font-variant-ligatures
Die Eigenschaft font-variant-ligatures steuert die Ligaturen und kontextuellen Formen, die harmonischere Darstellungen erzeugen.
Diese Eigenschaft kann folgende Werte annehmen:
- normal
- none
<common-lig-values><discretionary-lig-values><historical-lig-values><contextual-alt-values>
| Anfangswert | normal |
|---|---|
| Anwendbar auf | Auf alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbbar | Ja. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.fontVariantLigatures = "normal"; |
Syntax
Syntax der CSS-Eigenschaft font-variant-ligatures
font-variant-ligatures: normal | none | <common-lig-values> | <discretionary-lig-values> | <historical-lig-values> | <contextual-alt-values>;Beispiel für die font-variant-ligatures-Eigenschaft:
Beispiel für die CSS-Eigenschaft font-variant-ligatures mit den Werten no-common-ligatures und common-ligatures
<!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>Ergebnis
Arten von Ligaturen
CSS erkennt mehrere Arten von Ligaturen. Diese Ligaturen sind an das weit verbreitete OpenType-Format angepasst. Wir gehen im Folgenden auf jede einzelne ein.
Gemeinsame Ligaturen
Diese Ligaturen werden hauptsächlich verwendet, wenn Zeichen „aufeinandertreffen“. Dies macht den Text schwerer und unangenehmer zu lesen. Ein Beispiel ist die Kombination aus den Kleinbuchstaben „i“ und „f“. Das Aktivieren der Ligaturen verbindet diese beiden Buchstaben und erleichtert so das Lesen. CSS aktiviert gemeinsame Ligaturen standardmäßig. Sie können sie jedoch manuell aktivieren oder deaktivieren, wie hier gezeigt:
CSS-Eigenschaft font-variant-ligatures
/* Enable common ligatures */
font-variant-ligatures: common-ligatures;
/* Disable common ligatures */
font-variant-ligatures: no-common-ligatures;Optionale Ligaturen
Optionale Ligaturen, auch dekorative Ligaturen genannt, werden eher zur Dekoration verwendet. Tatsächlich sind sie nicht für die Lesbarkeit konzipiert. Diese Ligaturen sind in CSS standardmäßig deaktiviert und optional. Das bedeutet, dass Sie sie bei Bedarf aktivieren können. Das Aktivieren oder Deaktivieren optionaler Ligaturen erfolgt wie folgt:
CSS-Eigenschaft font-variant-ligatures
/* Enable discretionary ligatures */
font-variant-ligatures: discretionary-ligatures;
/* Disable discretionary ligatures */
font-variant-ligatures: no-discretionary-ligatures;Historische Ligaturen
Historische Ligaturen dienen ebenfalls der Dekoration. Sie können sie mit dem folgenden Code aktivieren oder deaktivieren:
CSS-Eigenschaft font-variant-ligatures
/* Enable historical ligatures */
font-variant-ligatures: historical-ligatures;
/* Disable historical ligatures */
font-variant-ligatures: no-historical-ligatures;Kontextuelle Alternativen
Kontextuelle Alternativen sind hilfreich, um die Lesbarkeit zu verbessern. Sie sorgen für ein besseres Zusammenspiel der Zeichen, die eine Ligatur bilden. Kontextuelle Alternativen sind insbesondere bei verbundenen Schriftarten nützlich. Dank ihnen verbinden sich die Striche korrekt von einem Zeichen zum nächsten und erhalten einen kontinuierlichen Fluss.
Werte
| Wert | Beschreibung |
|---|---|
| normal | Aktivierung von Formen und Ligaturen hängt von der Schriftart, der Sprache und der Art des Skripts ab. Dies ist der Standardwert dieser Eigenschaft. |
| none | Alle Ligaturen und kontextuellen Formen sind deaktiviert. |
<common-lig-values> | Steuert alle Ligaturen. |
<discretionary-lig-values> | Steuert spezifische Ligaturen. |
<historical-lig-values> | Steuert Ligaturen, die in alten Büchern verwendet werden. |
<contextual-alt-values> | Steuert die Anpassung der Buchstaben an ihren Kontext. |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Practice
Was steuert die CSS-Eigenschaft 'font-variant-ligatures'?