CSS font-kerning Eigenschaft
Die CSS-Eigenschaft font-kerning steuert die Kerning-Informationen einer Schriftart. Werte und Beispiele im Überblick.
Die CSS-Eigenschaft font-kerning steuert, ob der Browser die in einer Schriftart gespeicherten Kerning-Informationen verwendet.
Kerning ist die Anpassung des Abstands zwischen bestimmten Zeichenpaaren, damit der Text gleichmäßig ausgewogen wirkt. Ohne Kerning behält jede Glyphe ihren Standard-Seitenabstand, was nach Buchstaben wie A, V, T oder W störende Lücken hinterlassen kann. Schriftgestalter liefern eine Schriftart mit einer Tabelle von Kerning-Paaren (z. B. AV, To, We) aus, die dem Renderer mitteilt, diese Buchstaben näher zusammenzurücken. font-kerning entscheidet, ob diese Tabelle angewendet wird.
Kerning betrifft ausschließlich den Abstand zwischen Glyphen. Verwechseln Sie es nicht mit letter-spacing, das einen festen Tracking-Wert zu jedem Zeichen hinzufügt, unabhängig vom jeweiligen Zeichenpaar.
Wann verwenden?
Für die meisten Seiten müssen Sie font-kerning nie anfassen – moderne Browser aktivieren Kerning standardmäßig für Fließtext. Es gibt zwei Situationen, in denen Sie es einsetzen:
- Kerning bei kleinen Texten erzwingen. Einige Browser deaktivieren Kerning unterhalb einer bestimmten Größe aus Leistungsgründen. Mit
font-kerning: normalwird es für alle Größen angewendet – nützlich für feine Typografie wie Überschriften oder Hervorhebungen. - Kerning deaktivieren mit
font-kerning: none. Dies ist gelegentlich bei monospazierten Layouts, Tabellendaten oder dann nötig, wenn Sie die Textbreite selbst messen und vorhersagbare, kerningfreie Vorschübe benötigen.
Hat die Schriftart keine Kerning-Tabelle, hat die Eigenschaft keinen sichtbaren Effekt.
| Anfangswert | auto |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbt | Ja. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.fontKerning = "none"; |
Syntax
Syntax der CSS-Eigenschaft font-kerning
font-kerning: auto | normal | none;Kerning ein- und ausschalten im Vergleich
Die Paare AV, WA und To zeigen Kerning am deutlichsten. Im folgenden Beispiel erzwingt der erste Block Kerning an, der zweite schaltet es aus, sodass Sie die entstehenden Lücken sehen können:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
font-family: serif;
font-size: 60px;
}
div.kerned {
font-kerning: normal;
}
div.unkerned {
font-kerning: none;
}
</style>
</head>
<body>
<h2>font-kerning property example</h2>
<div class="kerned">AVATAR WAVE To</div>
<div class="unkerned">AVATAR WAVE To</div>
</body>
</html>Der Unterschied ist bei großen Schriftgrößen und in Serifenschriften am deutlichsten, die in der Regel reichhaltigere Kerning-Tabellen besitzen.
Werte
font-kerning akzeptiert eines von drei Schlüsselwörtern:
| Wert | Beschreibung |
|---|---|
auto | Überlässt dem Browser die Entscheidung, ob Kerning angewendet wird. Dies ist der Standardwert. Browser aktivieren es in der Regel, können es jedoch bei sehr kleinen Größen deaktivieren. |
normal | Wendet stets die Kerning-Informationen der Schriftart an. |
none | Deaktiviert Kerning; Glyphen behalten ihren Standard-Abstand. |
Verwandte Eigenschaften
font-kerning ist Teil der OpenType-Typografiesteuerung in CSS. Diese Eigenschaften ergänzen sie gut:
letter-spacing— einheitlichen Abstand zwischen allen Buchstaben hinzufügen oder verringern.font-feature-settings— direkter Zugriff auf OpenType-Features (kernist das Feature, dasfont-kerningunter einem benutzerfreundlicheren Namen zugänglich macht).font-familyundfont-variant— die Schriftart auswählen und verfeinern.
Standard-Browserverhalten
Da der Anfangswert auto ist, ist es für die meisten Texte in Ordnung, die Eigenschaft nicht zu setzen – Kerning wird trotzdem angewendet. Setzen Sie sie nur explizit, wenn Sie ein einheitliches Verhalten über alle Browser hinweg sicherstellen müssen, etwa font-kerning: normal für Display-Überschriften.