В letter-spacingимота контролира размера на пространството между всяка буква в дадена елемент или блок от текст. Стойностите, поддържани от, letter-spacingвключват стойности, свързани с шрифта (em, rem), родителски относителни стойности (процент), абсолютни стойности (px) и normalсвойството, което се нулира по подразбиране на шрифта.
Препоръчва се използването на стойности, свързани с шрифта, така че да се letter-spacingувеличават или намаляват по подходящ начин, когато размерът на шрифта се промени, или от дизайна, или от поведението на потребителя.
p ( /* 16 * 0.0625 = 1px */ letter-spacing: 0.0625em; )Най-важният момент, който трябва да се отбележи при използване, letter-spacingе, че посочената стойност не променя стойността по подразбиране, тя се добавя към разстоянието по подразбиране, което браузърът прилага (въз основа на показателите на шрифта). letter-spacingсъщо поддържа отрицателни стойности, които ще затегнат външния вид на текста, вместо да го разхлабят.
Точки на интерес
- Субпикселни стойности: в повечето браузъри, посочването на стойност, която се изчислява по-малко от,
1pxще доведе доletter-spacingнеприлагане. В момента Firefox 14+ и IE 10 поддържат подпикселно оформление; Opera и WebKit не го правят. Кръпката е попаднала, така че WebKit вече поддържа подпикселни разстояния между буквите. - В
letter-spacingимота е animatable с CSS преходи. - Един от начините за борба с пространството между вградените блокови елементи е настройката
letter-spacing: -4px;на родителския контейнер на вградените блокови елементи. След това ще трябва да нулиратеletter-spacing: normal;дъщерните елементи. - Рядко, ако някога е добра идея да се пишат интервали с малки букви.
Поддръжка на браузър
| Chrome | Сафари | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Върши работа | Върши работа | Върши работа | Повечето | Върши работа | Върши работа | Върши работа |
Бележка за поддръжката на мобилен браузър: някои версии на Opera Mobile, нестандартни реализации на WebKit и браузърът NetFront не поддържат letter-spacing. Подробностите са описани подробно в връзката QuirksMode по-горе.