Die letter-spacingEigenschaft steuert den Abstand zwischen den einzelnen Buchstaben in einem bestimmten Element oder Textblock. Zu den unterstützten Werten letter-spacinggehören font-relative Werte (em, rem), übergeordnete relative Werte (Prozent), absolute Werte (px) und die normalEigenschaft, die auf die Standardeinstellung der Schrift zurückgesetzt wird.
Es wird empfohlen, font-relative Werte zu verwenden, damit die Werte letter-spacingentsprechend erhöht oder verringert werden, wenn die Schriftgröße geändert wird, entweder aufgrund des Designs oder des Benutzerverhaltens.
p ( /* 16 * 0.0625 = 1px */ letter-spacing: 0.0625em; )Der wichtigste Punkt bei der Verwendung letter-spacingist, dass der angegebene Wert den Standard nicht ändert. Er wird dem Standardabstand hinzugefügt, den der Browser anwendet (basierend auf den Schriftmetriken). letter-spacingUnterstützt auch negative Werte, die das Erscheinungsbild von Text verbessern, anstatt ihn zu lockern.
Sehenswürdigkeiten
- Subpixel-Werte: Wenn Sie in den meisten Browsern einen Wert angeben, der auf weniger als berechnet wird,
1pxwird dies nichtletter-spacingangewendet. Derzeit unterstützen Firefox 14+ und IE 10 das Subpixel-Layout. Opera und WebKit nicht. Der Patch ist gelandet, sodass WebKit jetzt den Subpixel-Buchstabenabstand unterstützt. - Die
letter-spacingEigenschaft kann mit CSS-Übergängen animiert werden. - Eine Möglichkeit, gegen den Abstand zwischen Inline-Blockelementen anzukämpfen, besteht darin,
letter-spacing: -4px;den übergeordneten Container mit Inline-Blockelementen festzulegen. Sie müssen dann die untergeordnetenletter-spacing: normal;Elemente zurücksetzen . - Es ist selten oder nie eine gute Idee, Leerzeichen in Kleinbuchstaben zu schreiben.
Browser-Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funktioniert | Funktioniert | Funktioniert | Die meisten | Funktioniert | Funktioniert | Funktioniert |
Hinweis zur Unterstützung mobiler Browser: Einige Versionen von Opera Mobile, nicht standardmäßige WebKit-Implementierungen und der NetFront-Browser werden nicht unterstützt letter-spacing. Die Einzelheiten sind im obigen QuirksMode-Link aufgeführt.