font-kerning CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
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, wie Buchstabenabstände gesetzt werden. In gut gekernten Schriftarten sorgt diese Funktion dafür, dass die Zeichenabstände gleichmäßiger und angenehmer zu lesen sind, indem der Leerraum zwischen bestimmten Zeichenkombinationen reduziert wird.
Im Bild unten verwenden die Beispiele auf der linken Seite kein Kerning, während die 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
Diese Eigenschaft wird als einer der folgenden Schlüsselwortwerte angegeben:
auto-
Der Browser bestimmt, ob Kerning verwendet werden soll oder nicht. Beispielsweise deaktivieren einige Browser Kerning bei kleinen Schriftgrößen, da die Anwendung die Lesbarkeit des Textes beeinträchtigen könnte.
normal-
Kerning-Informationen, die in der Schriftart gespeichert sind, müssen angewendet werden.
none-
Kerning-Informationen, die in der Schriftart gespeichert sind, 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
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
| Spezifikation |
|---|
| CSS Fonts Module Level 4 # font-kerning-prop |