CSS-свойство font-kerning
CSS-свойство font-kerning управляет информацией о кернинге шрифта. Узнайте о значениях и посмотрите примеры.
CSS-свойство font-kerning определяет, использует ли браузер информацию о кернинге, хранящуюся в шрифте.
Кернинг — это корректировка расстояния между определёнными парами символов для того, чтобы текст выглядел равномерно. Без кернинга каждый глиф сохраняет свои боковые отступы по умолчанию, что может оставлять неприятные зазоры после букв наподобие A, V, T или W. Дизайнеры шрифтов снабжают шрифт таблицей кернинговых пар (например, AV, To, We), которая сообщает движку визуализации о необходимости придвинуть эти буквы друг к другу. Свойство font-kerning определяет, применяется ли эта таблица.
Кернинг касается исключительно расстояния между глифами. Не путайте его со свойством letter-spacing, которое добавляет фиксированное расстояние трекинга к каждому символу вне зависимости от пары.
Когда использовать
В большинстве случаев вам не нужно трогать font-kerning — современные браузеры включают кернинг по умолчанию для основного текста. Оно нужно в двух ситуациях:
- Принудительно включить кернинг для мелкого текста. Некоторые браузеры отключают кернинг ниже определённого размера из соображений производительности. Установка
font-kerning: normalобеспечивает применение кернинга при любых размерах — полезно для тонкой типографики, например заголовков или выносных цитат. - Отключить кернинг с помощью
font-kerning: none. Это иногда необходимо для моноширинных макетов, табличных данных или когда вы самостоятельно измеряете ширину текста и хотите предсказуемые, свободные от кернинга символьные продвижения.
Если в шрифте нет таблицы кернинга, свойство не оказывает видимого эффекта.
| Начальное значение | auto |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Да. |
| Анимируется | Нет. |
| Версия | CSS3 |
| DOM Синтаксис | object.style.fontKerning = "none"; |
Синтаксис
Синтаксис CSS-свойства font-kerning
font-kerning: auto | normal | none;Сравнение кернинга — включён и отключён
Пары AV, WA и To наглядно демонстрируют кернинг. В примере ниже первый блок принудительно включает кернинг, а второй отключает его, чтобы вы могли видеть, как зазоры увеличиваются:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
font-family: serif;
font-size: 60px;
}
div.kerned {
font-kerning: normal;
}
div.unkerned {
font-kerning: none;
}
</style>
</head>
<body>
<h2>font-kerning property example</h2>
<div class="kerned">AVATAR WAVE To</div>
<div class="unkerned">AVATAR WAVE To</div>
</body>
</html>Разница наиболее заметна при крупных размерах и в шрифтах с засечками, которые, как правило, имеют более богатые таблицы кернинга.
Значения
font-kerning принимает одно из трёх ключевых слов:
| Значение | Описание |
|---|---|
auto | Позволяет браузеру решить, применять ли кернинг. Это значение по умолчанию. Браузеры обычно включают кернинг, но могут отключать его при очень маленьких размерах. |
normal | Всегда применяет информацию о кернинге шрифта. |
none | Отключает кернинг; глифы сохраняют интервалы по умолчанию. |
Связанные свойства
font-kerning является частью средств управления OpenType-типографикой в CSS. Хорошо сочетается с:
letter-spacing— добавляет или убирает равномерный интервал между всеми буквами.font-feature-settings— низкоуровневый доступ к функциям OpenType (kern— это функция, которуюfont-kerningпредоставляет под более понятным именем).font-familyиfont-variant— выбор и уточнение гарнитуры.
Поведение браузера по умолчанию
Поскольку начальное значение равно auto, оставить свойство без установки вполне допустимо для большинства текстов — кернинг всё равно будет применяться. Устанавливайте его явно только в тех случаях, когда необходимо гарантировать одинаковое поведение во всех браузерах, например font-kerning: normal для отображаемых заголовков.