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 ⁨Juli 2015⁩.

Die letter-spacing CSS-Eigenschaft legt das horizontale Abstandverhalten zwischen Textzeichen fest. Dieser Wert wird dem natürlichen Abstand zwischen Zeichen hinzugefügt, während der Text gerendert wird. Positive Werte von letter-spacing führen dazu, dass Zeichen weiter auseinandergerückt werden, während negative Werte von letter-spacing die Zeichen näher zusammenbringen.

Probieren Sie es aus

letter-spacing: normal;

letter-spacing: 0.2rem;

letter-spacing: 1px;

letter-spacing: -1px;

<section id="default-example">
  <p id="example-element">
    As much mud in the streets as if the waters had but newly retired from the
    face of the earth, and it would not be wonderful to meet a Megalosaurus,
    forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

@font-face {
  src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
  font-family: "Amstelvar";
  font-style: normal;
}

section {
  font-size: 1.2em;
  font-family: "Amstelvar", serif;
}

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 verändern, um den Text zu rechtfertigen.
<length>: Gibt zusätzlichen Abstand zwischen Zeichen zusätzlich zu dem Standardabstand zwischen Zeichen an. Werte können negativ sein, aber es könnte implementierungsspezifische Grenzen geben. User-Agents dürfen den Zeichenraum möglicherweise nicht weiter vergrößern oder verkleinern, um den Text zu rechtfertigen.

Barrierefreiheit

Ein großer positiver oder negativer letter-spacing-Wert macht das Wort bzw. die Wörter, auf die das Styling angewendet wird, unlesbar. Bei Text, der mit einem sehr großen positiven Wert gestaltet wurde, sind die Buchstaben so weit auseinander, dass die Wörter wie einzelne, unverbundene Buchstaben erscheinen. Bei Text, der mit einem sehr großen negativen Wert gestaltet wurde, überlappen sich die Buchstaben so stark, dass die Wörter 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 automatisch die Lesbarkeit aller Schriftarten sicherstellt.

Internationalisierungskonzerne

Bei einigen Schriftsprachen 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 lässt den Text gebrochen erscheinen.

شسيبتنمك

Formelle Definition

Anfangswert	`normal`
Anwendbar auf	alle Elemente. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Ja
Berechneter Wert	ein optimaler Wert, der entweder aus einer absoluten Länge oder dem Schlüsselwort `normal` besteht
Animationstyp	Längenangabe

Formale Syntax

letter-spacing = 
  normal               |
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

Einstellen von Zeichenabstand

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

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden