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, wie Buchstaben verteilt sind. In gut gekernten Schriftarten sorgt diese Funktion dafür, dass der Zeichenabstand gleichmäßiger und angenehmer zu lesen ist, indem der Weißraum zwischen bestimmten Zeichenkombinationen reduziert wird.
Im Bild unten beispielsweise verwenden die Beispiele auf der linken Seite kein Kerning, während die auf der rechten Seite es tun:
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 Schriftkerning verwendet werden soll oder nicht. Beispielsweise deaktivieren einige Browser das Kerning bei kleinen Schriftarten, da dessen Anwendung die Lesbarkeit des Textes beeinträchtigen könnte.
normal-
Die in der Schriftart gespeicherte Kerning-Information muss angewendet werden.
none-
Die in der Schriftart gespeicherte Kerning-Information ist 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
| Specification |
|---|
| CSS Fonts Module Level 4 # font-kerning-prop |
Browser-Kompatibilität
Loading…