letter-spacing

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die letter-spacing-Eigenschaft CSS legt das horizontale Abstandverhalten zwischen Textzeichen fest. Dieser Wert wird dem natürlichen Abstand zwischen Zeichen beim Rendern des Textes hinzugefügt. Positive Werte von letter-spacing bewirken, dass Zeichen weiter auseinander rücken, während negative Werte von letter-spacing die Zeichen näher zusammenbringen.

Probieren Sie es aus

Syntax

css
/* Keyword value */
letter-spacing: normal;

/* <length> values */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: 0.3px;

/* Global values */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: revert;
letter-spacing: revert-layer;
letter-spacing: unset;

Werte

normal

Der normale Zeichenabstand für die aktuelle Schriftart. Im Gegensatz zu einem Wert von 0 erlaubt dieses Schlüsselwort dem User Agent, den Abstand zwischen Zeichen zu ändern, um den Text zu rechtfertigen.

<length>

Gibt zusätzlichen Zwischenzeichenabstand zusätzlich zu dem Standardabstand zwischen Zeichen an. Werte können negativ sein, aber es kann implementierungsspezifische Grenzen geben. User Agents dürfen den Zwischenzeichenabstand nicht weiter erhöhen oder verringern, um den Text zu rechtfertigen.

Barrierefreiheit

Ein großer positiver oder negativer letter-spacing-Wert macht das Wort oder die Worte, auf die das Styling angewendet wird, unleserlich. Für Text, der mit einem sehr großen positiven Wert gestylt ist, werden die Buchstaben so weit auseinanderliegen, dass das Wort oder die Worte wie eine Reihe individueller, nicht verbundener Buchstaben erscheinen. Bei Text, der mit einem sehr großen negativen Wert gestylt ist, überlappen sich die Buchstaben so stark, dass das Wort oder die Worte möglicherweise nicht mehr erkennbar sind.

Lesbare Zeichenabstände müssen im Einzelfall bestimmt werden, da verschiedene Schriftarten unterschiedliche Zeichenbreiten haben. Es gibt keinen einzigen Wert, der sicherstellen kann, dass alle Schriftarten automatisch ihre Lesbarkeit behalten.

Internationalisierungsanliegen

In einigen Schriftsystemen sollte kein Zeichenabstand angewendet werden. Zum Beispiel erwarten Sprachen, die das arabische Schriftsystem verwenden, dass verbundene Buchstaben visuell verbunden bleiben, wie im folgenden Beispiel. Die Anwendung von Zeichenabstand würde dazu führen, dass der Text gebrochen aussieht.

شسيبتنمك

Formale Definition

Anfangswertnormal
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Berechneter Wertein optimaler Wert, der entweder aus einer absoluten Länge oder dem Schlüsselwort normal besteht
AnimationstypLängenangabe

Formale Syntax

letter-spacing = 
normal |
<length>

Beispiele

Zeichenabstand festlegen

HTML

html
<p class="normal">letter spacing</p>
<p class="em-wide">letter spacing</p>
<p class="em-wider">letter spacing</p>
<p class="em-tight">letter spacing</p>
<p class="px-wide">letter spacing</p>

CSS

css
.normal {
  letter-spacing: normal;
}
.em-wide {
  letter-spacing: 0.4em;
}
.em-wider {
  letter-spacing: 1em;
}
.em-tight {
  letter-spacing: -0.05em;
}
.px-wide {
  letter-spacing: 6px;
}

Ergebnis

Spezifikationen

Specification
CSS Text Module Level 3
# letter-spacing-property
Scalable Vector Graphics (SVG) 2
# LetterSpacingProperty

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
letter-spacing
normal
On SVG elements

Legend

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

Full support
Full support

Siehe auch