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
/* 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
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>
Beispiele
>Zeichenabstand einstellen
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
.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
Loading…
Siehe auch
font-kerning
word-spacing
- SVG
letter-spacing
Attribut