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 von CSS legt fest, ob die in einer Schriftart gespeicherten Kerning-Informationen verwendet werden.

Probieren Sie es aus

Kerning definiert, wie Buchstabenabstände gesetzt werden. In gut gekernten Schriften sorgt dieses Merkmal für einen gleichmäßigeren und angenehmeren Lesefluss als dies sonst der Fall wäre.

In dem unten stehenden Bild verwenden die Beispiele auf der linken Seite kein Kerning, während die auf der rechten Seite es tun:

Beispiel für font-kerning

Syntax

css
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 Kerning verwendet werden soll oder nicht. Zum Beispiel deaktivieren einige Browser das Kerning bei kleinen Schriften, da das Anwenden 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.

Formale Definition

Initialer Wertauto
Anwendbar aufall elements and text. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

font-kerning = 
auto |
normal |
none

Beispiele

Aktivieren und Deaktivieren von Kerning

HTML

html
<div id="kern"></div>
<div id="no-kern"></div>
<textarea id="input">AV T. ij</textarea>

CSS

css
div {
  font-size: 2rem;
  font-family: serif;
}

#no-kern {
  font-kerning: none;
}

#kern {
  font-kerning: normal;
}

JavaScript

js
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

BCD tables only load in the browser

Siehe auch