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

BCD tables only load in the browser

Siehe auch