CSS свойство letter-spacing
Определение и применение
CSS свойство letter-spacing увеличивает или уменьшает интервал между символами в тексте.
Попробуйте значения letter-spacing
Меняется расстояние между символами. Отрицательное значение сближает буквы.
letter-spacing: normal
HTML и CSS примера
HTML
<div class="demo-target">
Изучаем CSS: оформление текста помогает читать и понимать страницу.
</div>
CSS
.demo-target {
box-sizing: border-box;
width: 100%;
max-width: 300px;
padding: 16px;
border: 2px solid #245a85;
background: #fff3d6;
color: #172c3d;
font: 18px/1.5 system-ui;
letter-spacing: normal;
}
CSS
.demo-target {
box-sizing: border-box;
width: 100%;
max-width: 300px;
padding: 16px;
border: 2px solid #245a85;
background: #fff3d6;
color: #172c3d;
font: 18px/1.5 system-ui;
letter-spacing: 2px;
}
CSS
.demo-target {
box-sizing: border-box;
width: 100%;
max-width: 300px;
padding: 16px;
border: 2px solid #245a85;
background: #fff3d6;
color: #172c3d;
font: 18px/1.5 system-ui;
letter-spacing: 4px;
}
CSS
.demo-target {
box-sizing: border-box;
width: 100%;
max-width: 300px;
padding: 16px;
border: 2px solid #245a85;
background: #fff3d6;
color: #172c3d;
font: 18px/1.5 system-ui;
letter-spacing: -1px;
}
Поддержка браузерами
Поддерживается во всех основных браузерах с 2015 года.
Отдельные значения (1) поддерживаются не везде — смотрите таблицу.
| Возможность | Компьютеры | Мобильные | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
 Chrome |  Edge |  Firefox |  Opera |  Safari | Chrome Android | Firefox for Android | Opera Android |  Safari on iOS |  Samsung Browser |  WebView Android | WebView on iOS | |
letter-spacing | 1 | 12 | 1 | 3.5 | 1 | 18 | 4 | 10.1 | 1 | 1.0 | 4.4 | 1 |
normal | 1 | 12 | 1 | 15 | 1 | 18 | 4 | 14 | 1 | 1.0 | 4.4 | 1 |
percentages | 145 | 145 | 45 | 129 | 7 | 145 | 45 | 96 | 7 | 145 | 7 | |
| On SVG elements | 1 | 12 | 72 | 7 | 5.1 | 18 | 79 | 10.1 | 5 | 1.0 | 4.4 | 5 |
поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31
CSS синтаксис:
CSS
letter-spacing: normal | <length>;
/* Глобальные значения */
letter-spacing: initial | inherit | unset | revert | revert-layer;| — выбор варианта.
JavaScript синтаксис:
JavaScript
element.style.letterSpacing = "5px";Начальное значение свойства
normal.
Значения свойства
| Значение | Описание |
|---|---|
normal |
Дополнительное пространство между символами отсутствует. Начальное значение. |
length |
Определяет дополнительное расстояние между символами (единицы измерения, используемые в CSS). Допускаются отрицательные значения. |
initial
|
Устанавливает начальное значение свойства. |
inherit
|
Наследует вычисленное значение свойства у родительского элемента. |
unset |
Для наследуемого свойства letter-spacing наследует вычисленное значение у родительского элемента.
|
revert |
Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS. |
revert-layer |
Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя
по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.
|
Спецификация
CSS Text — спецификация letter-spacing.
Наследуется
Да.
Анимируемое
Да, по вычисленному значению: совместимые числовые значения интерполируются плавно. Переход между несовместимыми типами или ключевыми словами может быть дискретным.
Примеры, попробуйте сами
Расстояние между буквами
Измените 3px на 1px или -1px и сравните плотность текста.
base.css
CSS
* {
box-sizing: border-box;
}
body {
margin: 16px;
font:
16px/1.5 system-ui,
sans-serif;
color: #172c3d;
}
section {
margin-bottom: 24px;
min-width: 0;
}
h3 {
margin: 0 0 12px;
font-size: 16px;
}
.item {
padding: 8px;
min-width: 0;
background: #c5dbea;
border: 1px solid #35658a;
overflow-wrap: anywhere;
}
index.html
HTML
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Расстояние между буквами</title>
</head>
<body>
<section>
<h3>Вариант A</h3>
<div class="sample first">
Учебный текст помогает увидеть изменение свойства. Сравните строки, расстояния и положение содержимого. Учебный
текст помогает увидеть изменение свойства. Сравните строки, расстояния и положение содержимого.
</div>
</section>
<section>
<h3>Вариант B</h3>
<div class="sample second">
Учебный текст помогает увидеть изменение свойства. Сравните строки, расстояния и положение содержимого. Учебный
текст помогает увидеть изменение свойства. Сравните строки, расстояния и положение содержимого.
</div>
</section>
</body>
</html>
style.css
CSS
.first {
letter-spacing: normal;
}
.second {
letter-spacing: 3px;
}
Режим чтения