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 CSS Eigenschaft legt fest, ob die in einer Schriftart gespeicherten Kerning-Informationen verwendet werden sollen.
Probieren Sie es aus
font-kerning: auto;
font-kerning: normal;
font-kerning: none;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
“We took Tracy to see ‘THE WATERFALL’ in W. Virginia.”
</div>
</section>
section {
font-family: serif;
}
Kerning beeinflusst, wie Buchstaben zueinander angeordnet sind. Bei gut gekernten Schriftarten sorgt dieses Merkmal dafür, dass der Zeichenabstand gleichmäßiger und angenehmer zu lesen ist, indem der Leerraum zwischen bestimmten Zeichenkombinationen reduziert wird.
Im Bild unten zum Beispiel verwenden die linken Beispiele kein Kerning, während die rechten es verwenden:
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 bestimmt, ob Font-Kerning verwendet werden soll oder nicht. Zum Beispiel deaktivieren einige Browser das Kerning bei kleinen Schriftarten, da dessen Anwendung die Lesbarkeit des Textes beeinträchtigen könnte.
normal-
In der Schrift gespeicherte Kerning-Informationen müssen angewendet werden.
none-
In der Schrift gespeicherte Kerning-Informationen werden 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 |