Свойство CSS `font-kerning`
Базовая поддержка Широко доступно
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с января 2020 года.
font-kerning CSS задаёт использование информации о кернинге, хранящейся в шрифте.
Попробуйте
font-kerning: auto;
font-kerning: normal;
font-kerning: none;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
"We took Tracy to see 'THE WATERFALL' in W. Virginia."
</div>
</section>
section {
font-family: serif;
}
Кернинг влияет на расстояние между буквами. В шрифтах с хорошим кернингом эта функция делает интервалы между символами более равномерными и удобными для чтения, сокращая пробелы между некоторыми сочетаниями символов.
Например, на изображении ниже в примерах слева кернинг не используется, а в примерах справа используется:
Синтаксис
font-kerning: auto; font-kerning: normal; font-kerning: none; /* Global values */ font-kerning: inherit; font-kerning: initial; font-kerning: revert; font-kerning: revert-layer; font-kerning: unset;
Значения
Свойство задаётся одним из следующих ключевых слов:
-
auto - Браузер определяет, следует ли использовать кернинг шрифта. Например, некоторые браузеры отключают кернинг для мелкого шрифта, поскольку его применение может ухудшить читаемость текста.
-
normal - Информация о кернинге, хранящаяся в шрифте, должна применяться.
-
none - Информация о кернинге, хранящаяся в шрифте, отключена.
Формальное определение
| Начальное значение | auto |
|---|---|
| Применяется к | всем элементам и тексту |
| Наследуется | да |
| Вычисленное значение | как задано |
| Тип анимации | дискретный |
Формальный синтаксис
font-kerning =
auto |
normal |
none
Примеры
Включение и отключение кернинга
HTML
<div id="kern"></div> <div id="no-kern"></div> <textarea id="input">AV T. ij</textarea>
CSS
div {
font-size: 2rem;
font-family: serif;
}
#no-kern {
font-kerning: none;
}
#kern {
font-kerning: normal;
}
JavaScript
const input = document.getElementById("input");
const kern = document.getElementById("kern");
const noKern = document.getElementById("no-kern");
input.addEventListener("keyup", () => {
kern.textContent = input.value; /* Update content */
noKern.textContent = input.value;
});
kern.textContent = input.value; /* Initialize content */
noKern.textContent = input.value;
Спецификации
| Спецификация |
|---|
| Модуль CSS Fonts, уровень 4 # font-kerning-prop |
Совместимость с браузерами
| Настольные устройства | Мобильные устройства | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome для Android | Firefox для Android | Opera для Android | Safari на iOS | Samsung Internet | WebView для Android | WebView на iOS | |
font-kerning |
33
29–33
|
79 |
32 |
20
16–20
|
9
6
|
33
29–33
|
32 |
20
16–20
|
9
6
|
2.0
1.0–2.0
|
4.4.3
4.4–4.4.3
|
9
6
|
auto |
33 |
79 |
32 |
20 |
9 |
33 |
32 |
20 |
9 |
2.0 |
4.4.3 |
9 |
none |
33 |
79 |
32 |
20 |
9 |
33 |
32 |
20 |
9 |
2.0 |
4.4.3 |
9 |
normal |
33 |
79 |
32 |
20 |
9 |
33 |
32 |
20 |
9 |
2.0 |
4.4.3 |
9 |
См. также
-
font-variant,font-variant-position,font-variant-east-asian,font-variant-caps,font-variant-ligatures,font-variant-numeric,font-variant-alternates,font-synthesis,letter-spacing
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-kerning
