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

Question

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

铬合金：

火狐：

苹果浏览器：

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

代码示例：

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

有没有人有任何解决方法？我一直在寻找错误报告，但我找不到任何东西。

Answer 1

来自W3 CSS3 字体：

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

canvas{
    font-kerning : normal;
}

检查这个JSFiddle

基于这篇关于Cross-browser kerning pair & ligatures 的文章，或者你可以使用optimizeLegibility这样的，

canvas{
     text-rendering: optimizeLegibility;
}

检查这个JSFiddle

目前支持该声明的有：Safari 5、The Webkit Nightlies 和 Chrome。

Firefox 已经默认使用 optimizeLegibility 来处理超过 20 像素的文本大小。

Answer 2

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

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

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

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