[go: up one dir, main page]

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

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 bestimmt das Verhalten des horizontalen Abstands zwischen Textzeichen. Dieser Wert wird dem natürlichen Abstand zwischen Zeichen beim Rendern des Textes hinzugefügt. Positive Werte von letter-spacing führen dazu, dass Zeichen weiter auseinandergerückt werden, während negative Werte von letter-spacing 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 ermöglicht dieses Schlüsselwort dem User Agent, den Abstand zwischen Zeichen zu ändern, um Text auszurichten.

<length>

Bestimmt zusätzlichen Zwischenraum zwischen Zeichen zusätzlich zu dem Standardraum zwischen Zeichen. Werte können negativ sein, es kann jedoch implementierungsspezifische Grenzen geben. User Agents dürfen den Zwischenraum zwischen Zeichen nicht weiter erhöhen oder verringern, um Text auszurichten.

Barrierefreiheit

Ein großer positiver oder negativer letter-spacing-Wert macht das/die Wort(e), auf das/die das Styling angewendet wird, unlesbar. Für Text, der mit einem sehr großen positiven Wert gestylt ist, stehen die Buchstaben so weit auseinander, dass das/die Wort(e) wie eine Reihe von einzelnen, unverbundenen Buchstaben erscheint. Für Text, der mit einem sehr großen negativen Wert gestylt ist, überlappen sich die Buchstaben so stark, dass das/die Wort(e) möglicherweise nicht erkennbar ist/sind.

Lesbarer Zeichenabstand muss fallweise bestimmt werden, da unterschiedliche Schriftfamilien unterschiedliche Zeichenbreiten haben. Es gibt keinen Wert, der automatisch sicherstellt, dass alle Schriftfamilien ihre Lesbarkeit beibehalten.

Internationalisierungskonzepte

In einigen Schriftsystemen sollte kein Zeichenabstand angewendet werden. Beispielsweise erwarten Sprachen, die die arabische Schrift 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 einstellen

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