如何在 Chrome 中控制 Canvas fillText() 的字体字距调整？答案

【问题标题】：How to control the font kerning for Canvas fillText() in Chrome?如何在 Chrome 中控制 Canvas fillText() 的字体字距调整？
【发布时间】：2015-12-18 12:09:39
【问题描述】：

我正在尝试创建一个不错的画布文本跨浏览器渲染引擎。我注意到字距调整对在 Chrome 中无法正确呈现，但在 Safari 和 Firefox 中它们可以正常工作。

铬：

火狐：

Safari：

在这里试试小提琴：http://jsfiddle.net/o1n5014u/

代码示例：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "40px Arial";
ctx.fillText("VAVA Te", 10, 50);

有人有解决方法吗？我已经查找了错误报告，但我找不到任何东西。

【问题讨论】：

顺便说一句，SVG 也一样，但是我们有 font-kerning: normal; 来解决它。我希望我们对 Canvas 也有同样的看法……

标签： javascript google-chrome canvas fonts kerning

【解决方案1】：

来自W3 CSS3 Fonts：

要显式打开font-kerning，您需要将font-kerning 属性设置为normal，

canvas{
    font-kerning : normal;
}

检查这个JSFiddle

基于Cross-browser kerning pairs & ligatures上的这篇文章，或者您可以像这样使用optimizeLegibility，

canvas{
     text-rendering: optimizeLegibility;
}

检查这个JSFiddle

目前支持声明：Safari 5, The Webkit Nightlies 和 Chrome。

Firefox 已经默认使用 optimizeLegibility 来调整文本大小 20px以上。

【讨论】：

我不知道您可以将印刷 CSS 样式添加到 canvas 元素。谢谢！

【解决方案2】：

帮助不大，但我们在浏览器中运行的文本处理器应用程序中遇到了同样的问题。

我们尝试了以下不起作用的画布设置：

canvas.style.fontKerning（将此设置为 none 应该禁用字距调整，但它不起作用）
canvas.style.textRendering（将此设置为 optimizeSpeed 应该禁用字距调整，但它不起作用）
canvas.style.letterSpacing（将此设置为 0 应该禁用字距调整，但它不起作用）

我们的解决方案是通过将每个“字母”一个接一个地绘制到画布上来防止发生字距调整。但是，为此，您需要使用字体文件中的字体度量来计算字形宽度。

【讨论】：

请注意，这些功能现在似乎可以在 Chrome 83 中使用，并且逐字母绘制字符有许多需要注意的问题，尤其是在外语中。