межбуквенный интервал

Линия базовой строки Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Свойство letter-spacing CSS задаёт поведение горизонтального интервала между символами текста. Это значение добавляется к естественному интервалу между символами при отрисовке текста. Положительные значения letter-spacing приводят к увеличению расстояния между символами, а отрицательные значения letter-spacing — к уменьшению этого расстояния.

Попробуйте

Синтаксис

/* Keyword value */
letter-spacing: normal;

/* <length> values */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: 0.3px;

/* Global values */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: revert;
letter-spacing: revert-layer;
letter-spacing: unset;

Значения

normal: Нормальный межбуквенный интервал для текущего шрифта. В отличие от значения 0, это ключевое слово позволяет агенту пользователя изменять интервал между символами для выравнивания текста.
<length>: Задает дополнительный интервал между символами в дополнение к стандартному интервалу. Значения могут быть отрицательными, но могут быть и ограничения, зависящие от реализации. Агенты пользователя не должны дополнительно увеличивать или уменьшать интервал между символами для выравнивания текста.

Доступность

Большое положительное или отрицательное значение letter-spacing сделает слово(а), к которому применено это стилистическое оформление, нечитаемым. Для текста со стилистическим оформлением с очень большим положительным значением буквы будут настолько разнесены, что слово(а) будут выглядеть как ряд отдельных, несвязанных букв. Для текста со стилистическим оформлением с очень большим отрицательным значением буквы будут перекрывать друг друга настолько, что слово(а) могут быть неразличимы.

Читаемость межбуквенного интервала необходимо определять в каждом конкретном случае, так как у разных начертаний шрифтов различная ширина символов. Нет одного значения, которое гарантирует, что все начертания шрифтов автоматически сохранят свою читаемость.

Вопросы интернационализации

Для некоторых письменных языков межбуквенный интервал не должен применяться. Например, языки, использующие арабскую письменность, ожидают, что соединённые буквы останутся визуально соединёнными, как в следующем примере. Применение межбуквенного интервала приведёт к тому, что текст будет выглядеть разрывно.

شسيبتنمك

Формальное определение

Начальное значение	`normal`
Применяется к	всем элементам. Также применяется к `::first-letter` и `::first-line`.
Наследуется	да
Вычисленное значение	оптимальное значение, состоящее либо из абсолютной длины, либо ключевого слова `normal`
Тип анимации	длина

Формальный синтаксис

letter-spacing = 
  normal    |
  <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;
}

Результат

Спецификации

Спецификация
CSS Текстовый модуль уровень 3 # letter-spacing-property

Совместимость браузеров

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`letter-spacing`	1	12	1	3.5	1	18	4	10.1	1	1.0	4.4
`normal`	1	12	1	15	1	18	4	14	1	1.0	4.4
`svg_elements`	1	12	72	7	5.1	18	79	10.1	5	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing