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 Januar 2020.
Die font-kerning CSS-Eigenschaft legt die Verwendung der in einer Schriftart gespeicherten Kerning-Informationen fest.
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 die Zeichenabstände. In gut gekernten Schriftarten sorgt dieses Merkmal dafür, dass die Zeichenabstände einheitlicher und angenehmer zu lesen sind, indem der Weißraum zwischen bestimmten Zeichenkombinationen reduziert wird.
In dem folgenden Bild verwenden die Beispiele auf der linken Seite zum Beispiel kein Kerning, während die Beispiele auf der rechten Seite Kerning 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 entscheidet, ob das Font-Kerning verwendet werden soll oder nicht. Einige Browser deaktivieren zum Beispiel Kerning bei kleinen Schriftarten, da das Anwenden die Lesbarkeit des Textes beeinträchtigen könnte.
normal-
Die in der Schrift gespeicherten Kerning-Informationen müssen angewendet werden.
none-
Die in der Schrift gespeicherten 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
font-kerning =
auto |
normal |
none
Beispiele
Aktivieren und Deaktivieren des 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 |