CanvasRenderingContext2D: свойство fontKerning

Свойство CanvasRenderingContext2D.fontKerning API холста Canvas API определяет, как используется информация о кернинге шрифтов.

Кернинг регулирует интервалы между соседними буквами в пропорциональном шрифте, позволяя им примыкать друг к другу, если есть место. Например, в хорошо кёрненных шрифтах символы AV, Ta и We соединяются вместе, что делает интервалы между символами более равномерными и приятными для чтения, чем в тексте без кернинга.

Это свойство соответствует свойству CSS font-kerning.

Значение

Свойство может использоваться для получения или установки значения.

Допустимые значения:

auto: Браузер определяет, следует ли использовать кернинг шрифта. Например, некоторые браузеры отключают кернинг для мелких шрифтов, поскольку это может ухудшить читаемость текста.
normal: Информация о кернинге шрифта, хранящаяся в шрифте, должна быть применена.
none: Информация о кернинге шрифта, хранящаяся в шрифте, отключена.

Примеры

В этом примере отображается текст "AVA Ta We" с использованием каждого из поддерживаемых значений свойства textRendering.

HTML

<canvas id="canvas" width="700" height="140"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px serif";

// Default (auto)
ctx.fillText(`AVA Ta We (default: ${ctx.fontKerning})`, 5, 30);

// Font kerning: normal
ctx.fontKerning = "normal";
ctx.fillText(`AVA Ta We (${ctx.fontKerning})`, 5, 70);

// Font kerning: none
ctx.fontKerning = "none";
ctx.fillText(`AVA Ta We (${ctx.fontKerning})`, 5, 110);

Результат

Обратите внимание, что в последней строке кернинг шрифта отключен, поэтому соседние символы равномерно распределены.

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

Спецификация
HTML # dom-context-2d-fontkerning

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`fontKerning`	99	99	104	85	Нет	99	104	68	Нет	18.0	99

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