Diefont-kerningCSS-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>  <div>    "We took Tracy to see 'THE WATERFALL' in W. Virginia."  </div></section>

section {  font-family: serif;}

Kerning beeinflusst die Zeichenabstände. Ingut gekernten Schriftarten sorgt dieses Merkmal dafür, dass die Zeichenabstände einheitlicher und angenehmer zu lesen sind, indem der Weißraum zwischen bestimmten Zeichenkombinationen reduziert wird.

In dem folgenden Bild verwenden die Beispiele auf der linken Seite zum Beispiel kein Kerning, während die Beispiele auf der rechten Seite Kerning verwenden:

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 Font-Kerning verwendet werden soll oder nicht. Einige Browser deaktivieren zum Beispiel Kerning bei kleinen Schriftarten, da das Anwenden die Lesbarkeit des Textes beeinträchtigen könnte.

normal

Die in der Schrift gespeicherten Kerning-Informationen müssen angewendet werden.

none

Die in der Schrift gespeicherten Kerning-Informationen werden deaktiviert.

Formale Definition

Formale Syntax

font-kerning =
auto|
normal|
none

Beispiele

Aktivieren und Deaktivieren des Kerning

HTML

<div></div><div></div><textarea>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

Browser-Kompatibilität

Siehe auch

• font-variant,font-variant-position,font-variant-east-asian,font-variant-caps,font-variant-ligatures,font-variant-numeric,font-variant-alternates,font-synthesis,letter-spacing