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 CSS Eigenschaft legt die Verwendung der in einer Schriftart gespeicherten Kerning-Informationen fest.

Probieren Sie es aus

Kerning betrifft, wie Buchstabenabstände gestaltet sind. In gut kerned Schriftarten sorgt dieses Feature dafür, dass die Zeichenabstände einheitlicher und angenehmer zu lesen sind, indem der Weißraum zwischen bestimmten Zeichenkombinationen verringert wird.

Im Bild unten verwenden die linken Beispiele kein Kerning, während die rechten Beispiele 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 bestimmt, ob das Schriftkerning 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

Schriftkerning-Informationen, die in der Schrift gespeichert sind, müssen angewendet werden.

none

Schriftkerning-Informationen, die in der Schrift gespeichert sind, werden deaktiviert.

Formale Definition

Anfangswertauto
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

Aktivierung und Deaktivierung 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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-kerning

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch