Свойство letter-spacing
определяет межбуквенное расстояние в тексте.
Исходники для интерактивных примеров находятся в репозитории на GitHub. Если вы желаете поучавствовать в их улучшении, пожалуйста склонируйте https://github.com/mdn/interactive-examples и отправьте нам pull-реквест.
Синтаксис
/* Значения - ключевые слова */
letter-spacing: normal;
/* Значения <length> */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;
/* Глобальные значения */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;
Значения
normal
- Стандартное межбуквенное расстояние для текущего шрифта. В отличие от значения
0
, это ключевое слово позволяет агенту пользователя изменить расстояние между буквами для выравнивания текста. <length>
- Определяет дополнительное расстояние между буквами добавляющееся к стандартному расстоянию между символами. Значение может быть отрицательным, но при этом могут быть ограничения, зависящие от конкретной реализации. Агент пользователя может не увеличивать или уменьшать межбуквенное расстояние для выравнивания текста.
Формальный синтаксис
Примеры
HTML
<p class="normal">letter spacing</p>
<p class="em-wide">letter spacing</p>
<p class="em-wider">letter spacing</p>
<p class="em-tight">letter spacing</p>
<p class="px-wide">letter spacing</p>
CSS
.normal { letter-spacing: normal; }
.em-wide { letter-spacing: 0.4em; }
.em-wider { letter-spacing: 1em; }
.em-tight { letter-spacing: -0.05em; }
.px-wide { letter-spacing: 6px; }
Результат
Проблемы доступности
Большие положительные или отрицательные значения свойства letter-spacing
могут сделать текст, к которому применяется форматирование, нечитаемым. При очень больших положительных значениях этого свойтва, буквы в тексте будут настолько далеко друг от друга, что не будут восприниматься как цельные слова. При очень больших отрицательных значениях буквы будут перекрываться друг другом до такой степени, что слова могут стать неразличимы.
Межбуквенное расстояние должно быть определено индивидуально для каждого случая, так как в разных семействах шрифтов ширина символов различна. Нет какого-то универсального значения, которое может быть применено для наилучшего отображения во всех семействах шрифтов.
Спецификации
Specification | Status | Comment |
---|---|---|
CSS Text Module Level 3 Определение 'letter-spacing' в этой спецификации. |
Рабочий черновик | Без изменений. |
CSS Transitions Определение 'letter-spacing' в этой спецификации. |
Рабочий черновик | Определяет letter-spacing как доступное к анимированию. |
CSS Level 2 (Revision 1) Определение 'letter-spacing' в этой спецификации. |
Рекомендация | Без изменений. |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) Определение 'letter-spacing' в этой спецификации. |
Рекомендация | Первоначальное определение в SVG. |
CSS Level 1 Определение 'letter-spacing' в этой спецификации. |
Рекомендация | Первоначальное определение. |
Начальное значение | normal |
---|---|
Применяется к | все элементы. Это также применяется к ::first-letter и ::first-line . |
Наследуется | да |
Обработка значения | оптимальное значение состоит из абсолютной длины или ключевого слова normal |
Animation type | длина |
Браузерная совместимость
BCD tables only load in the browser