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 in CSS 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;
}
Das Kerning beeinflusst, wie Buchstaben abstandsgemäß verteilt werden. In gut gekernten Schriftarten macht dieses Merkmal den Zeichenabstand gleichmäßiger und angenehmer zu lesen, indem der Weißraum zwischen bestimmten Zeichenkombinationen verringert wird.
Im folgenden Bild verwenden die linken Beispiele kein Kerning, während die rechten Beispiele 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 bestimmt, ob das Schriftarten-Kerning verwendet werden soll oder nicht. Beispielsweise deaktivieren einige Browser das Kerning bei kleinen Schriftarten, da dies die Lesbarkeit des Textes beeinträchtigen könnte.
normal-
Die in der Schriftart gespeicherten Kerning-Informationen müssen angewendet werden.
none-
Die in der Schriftart 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
Kerning aktivieren und deaktivieren
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 |