CanvasRenderingContext2D:fontKerning 属性

Canvas API 的 CanvasRenderingContext2D.fontKerning 属性用于指定如何使用字体字距调整(kerning)信息。

字距调整会调整比例字体的相邻字母间距,如果有空间,则允许它们在视觉上互相接触。例如,在良好的字距调整字体中,字符 AVTaWe 会更紧凑地排列,使得字符间距更加均匀,阅读起来比没有调整字距的文本更加舒服。

这个属性对应于 CSS 中的 font-kerning 属性。

该属性可以用来获取或设置值。

允许的取值包括:

auto

浏览器决定是否应该使用字距调整。例如,某些浏览器会在小字体上禁用字距调整,因为应用字距调整可能会影响文本的可读性。

normal

必须应用存储在字体中的字距调整信息。

none

禁用存储在字体中的字距调整信息。

示例

以下示例演示了使用 fontKerning 属性所支持的每一个值来显示文本“AVA Ta We”。

HTML

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

JavaScript

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

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

// 字距调整:normal
ctx.fontKerning = "normal";
ctx.fillText(`AVA Ta We(${ctx.fontKerning})`, 5, 70);

// 字距调整:none
ctx.fontKerning = "none";
ctx.fillText(`AVA Ta We(${ctx.fontKerning})`, 5, 110);

结果

请注意,最后一个字符串禁用了字距调整,因此相邻字符的间距是均匀的。

规范

Specification
HTML Standard
# dom-context-2d-fontkerning

浏览器兼容性

BCD tables only load in the browser