font-kerning
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-kerning-Eigenschaft von CSS legt fest, ob die in einer Schriftart gespeicherten Kerning-Informationen verwendet werden.
Probieren Sie es aus
Kerning definiert, wie Buchstabenabstände gesetzt werden. In gut gekernten Schriften sorgt dieses Merkmal für einen gleichmäßigeren und angenehmeren Lesefluss als dies sonst der Fall wäre.
In dem unten stehenden Bild verwenden die Beispiele auf der linken Seite kein Kerning, während die auf der rechten Seite es tun:
Syntax
font-kerning: auto;
font-kerning: normal;
font-kerning: none;
/* Global values */
font-kerning: inherit;
font-kerning: initial;
font-kerning: revert;
font-kerning: revert-layer;
font-kerning: unset;
Werte
auto-
Der Browser entscheidet, ob Kerning verwendet werden soll oder nicht. Zum Beispiel deaktivieren einige Browser das Kerning bei kleinen Schriften, da das Anwenden die Lesbarkeit des Textes beeinträchtigen könnte.
normal-
Die im Font gespeicherten Kerning-Informationen müssen angewendet werden.
none-
Die im Font gespeicherten Kerning-Informationen sind deaktiviert.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | all elements and text. Auch anwendbar auf ::first-letter und ::first-line. |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
Beispiele
Aktivieren und Deaktivieren von Kerning
HTML
<div id="kern"></div>
<div id="no-kern"></div>
<textarea id="input">AV T. ij</textarea>
CSS
div {
font-size: 2rem;
font-family: serif;
}
#no-kern {
font-kerning: none;
}
#kern {
font-kerning: normal;
}
JavaScript
const input = document.getElementById("input");
const kern = document.getElementById("kern");
const noKern = document.getElementById("no-kern");
input.addEventListener("keyup", () => {
kern.textContent = input.value; /* Update content */
noKern.textContent = input.value;
});
kern.textContent = input.value; /* Initialize content */
noKern.textContent = input.value;
Spezifikationen
| Specification |
|---|
| CSS Fonts Module Level 4 # font-kerning-prop |
Browser-Kompatibilität
BCD tables only load in the browser