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Свойство анимируемое с CSS Transitions.- Один из способов борьбы с пробелом между встроенными блочными элементами - установка
letter-spacing: -4px;в родительском контейнере встроенных блочных элементов. Затем вам нужно будет выполнить сбросletter-spacing: normal;дочерних элементов. - Использование строчных букв в пространстве редко, если вообще когда-либо является хорошей идеей.
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Работает | Работает | Работает | Наиболее | Работает | Работает | Работает |
Примечание о поддержке мобильных браузеров: некоторые версии Opera Mobile, нестандартные реализации WebKit и браузер NetFront не поддерживают letter-spacing. Подробности подробно описаны в ссылке QuirksMode выше.