CanvasRenderingContext2D：fontKerning 属性

CanvasRenderingContext2D.fontKerning 属性是 Canvas API 的一部分，它指定了如何使用字体间距信息。

间距调整了比例字体中相邻字母的间距，如果可用空间，则允许它们彼此进入视觉区域。例如，在间距良好的字体中，字符 AV、Ta 和 We 会嵌套在一起，使字符间距更加均匀，阅读起来也更舒适，而不是没有间距的等效文本。

该属性对应于 font-kerning CSS 属性。

值

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

允许的值为

auto

浏览器确定是否应使用字体间距。例如，某些浏览器会在小字体上禁用间距，因为应用间距可能会损害文本的可读性。

normal

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

none

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

示例

在此示例中，我们使用 textRendering 属性的每个支持值显示文本“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";

// 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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。