letter-spacingWłaściwość kontroluje ilość przestrzeni pomiędzy każdą literą w danym elemencie lub bloku tekstu. Wartości obsługiwane przez letter-spacingobejmują wartości względne czcionki (em, rem), wartości względne względem rodzica (procent), wartości bezwzględne (piksele) i normalwłaściwość, która resetuje do wartości domyślnej czcionki.
Zalecane jest używanie wartości odnoszących się do czcionki, aby odpowiednio letter-spacingzwiększać lub zmniejszać rozmiar czcionki, zgodnie z projektem lub zachowaniem użytkownika.
p ( /* 16 * 0.0625 = 1px */ letter-spacing: 0.0625em; )Najważniejszą letter-spacingrzeczą, na którą należy zwrócić uwagę podczas używania, jest to, że podana wartość nie zmienia wartości domyślnej, jest dodawana do domyślnych odstępów stosowanych przez przeglądarkę (na podstawie metryk czcionek). letter-spacingobsługuje również wartości ujemne, które zaostrzają wygląd tekstu, zamiast go rozluźniać.
Użyteczne miejsca
- Wartości subpikseli: w większości przeglądarek określenie wartości, która jest mniejsza niż,
1pxspowoduje brakletter-spacingzastosowania. Obecnie Firefox 14+ i IE 10 obsługują układ subpikseli; Opera i WebKit tego nie robią. Łatka wylądowała, więc WebKit obsługuje teraz odstępy między literami w podpikselach. letter-spacingNieruchomość jest animatable z CSS Transitions.- Jednym ze sposobów walki z odstępami między wbudowanymi elementami blokowymi jest ustawienie
letter-spacing: -4px;w kontenerze nadrzędnym elementów inline-block. Będziesz wtedy musiał zresetowaćletter-spacing: normal;elementy podrzędne. - Rzadko, jeśli w ogóle, dobrym pomysłem jest wstawianie małych liter spacji.
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| Pracuje | Pracuje | Pracuje | Większość | Pracuje | Pracuje | Pracuje |
Uwaga dotycząca obsługi przeglądarek mobilnych: niektóre wersje Opera Mobile, niestandardowe implementacje WebKit i przeglądarka NetFront nie obsługują letter-spacing. Szczegóły opisano w powyższym linku QuirksMode.