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
/* 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
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
Beispiele
Zeichenabstand festlegen
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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
letter-spacing | ||||||||||||
normal | ||||||||||||
On SVG elements |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
font-kerning
word-spacing
- SVG
letter-spacing
Attribut