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

Question

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

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

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＆amp;铬。

     

Firefox默认使用optimizeLegibility作为文本大小   高于20px。

Answer 2

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

我们尝试了以下无效的画布设置：

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

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