Den letter-spacingegenskapen styr mängden utrymme mellan varje bokstav i ett givet element eller block av text. Värden som stöds av letter-spacinginkluderar teckensnittsrelaterade värden (em, rem), överordnade relativa värden (procent), absoluta värden (px) och normalegenskapen, som återställs till teckensnittets standard.
Vi rekommenderar att man använder relativa teckensnittsvärden så att de letter-spacingökar eller minskar på lämpligt sätt när teckensnittsstorleken ändras, antingen genom design eller genom användarnas beteende.
p ( /* 16 * 0.0625 = 1px */ letter-spacing: 0.0625em; )Den viktigaste punkten att notera vid användning letter-spacingär att det angivna värdet inte ändrar standard, det läggs till i standardavståndet som webbläsaren använder (baserat på typsnittstecken). letter-spacingstöder också negativa värden, vilket skärper utseendet på texten snarare än att lossa den.
Intressanta platser
- Underpixelvärden: i de flesta webbläsare anger du ett värde som beräknas till mindre än
1pxatt det inte kommerletter-spacingatt tillämpas. För närvarande stöder Firefox 14+ och IE 10 subpixellayout; Opera och WebKit inte. Plåstret har landat, så WebKit stöder nu subpixel-bokstavsavstånd. - Den
letter-spacingegenskapen är animatable med CSS övergångar. - Ett av sätten att bekämpa utrymmet mellan inbyggda blockelement är att sätta
letter-spacing: -4px;på moderbehållaren med inline-blockelement. Du måste sedan återställaletter-spacing: normal;barnelementen. - Det är sällan om någonsin en bra idé att skriva stora bokstäver i mellanslag.
Webbläsarstöd
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Arbetar | Arbetar | Arbetar | Mest | Arbetar | Arbetar | Arbetar |
En anmärkning om mobilwebbläsarstöd: vissa versioner av Opera Mobile, icke-standardiserade WebKit-implementeringar och NetFront-webbläsaren stöder inte letter-spacing. Detaljerna beskrivs i länken QuirksMode ovan.