font-kerning

Baseline Широко доступно

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

Свойство font-kerning CSS задаёт использование информации о кернинге, хранящейся в шрифте.

Попробуйте

Кернинг определяет, как располагаются буквы. В хорошо прокерненных шрифтах эта функция делает расстояние между символами более равномерным и приятным для чтения.

Например, на изображении слева примеры без кернинга, а справа — с ним:

Example of font-kerning

Синтаксис

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`
Применимо к	всем элементам и тексту. Также применимо к `::first-letter` и `::first-line`.
Наследуется	да
Вычисленное значение	как указано
Тип анимации	дискретный

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

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 Module Level 4 # font-kerning-prop

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`font-kerning`	3329–33	79	32	2016–20	96	3329–33	32	2016–20	96	2.01.0–2.0	4.4.34.4–4.4.3

См. также

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–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning