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 macht diese Funktion die Zeichenabstände gleichmäßiger und angenehmer zu lesen, indem der Weißraum zwischen bestimmten Zeichenkombinationen reduziert wird.
Im folgenden Bild zum Beispiel verwenden die Beispiele auf der linken Seite kein Kerning, während es bei denen auf der rechten Seite verwendet wird:
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 Schriftkerning verwendet werden soll oder nicht. Einige Browser deaktivieren zum Beispiel Kerning bei kleinen Schriftgrößen, da dessen Anwendung 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.
Formelle 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 |
Formelle Syntax
font-kerning =
auto |
normal |
none
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
| Spezifikation |
|---|
| CSS Fonts Module Level 4 # font-kerning-prop |