如何在Chrome中控制Canvas fillText（）的字体字距调整？

Question

我正在尝试创建一个体面的跨浏览器渲染引擎的画布文本。我注意到kerning对在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);

有没有人有任何解决方法？我找过bug报告，但找不到任何东西。

Answer 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，Webkit Nightlies和Chrome。

对于20px以上的文本大小，Firefox已默认使用optimizeLegibility。

Answer 2

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

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

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

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