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

Question

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

Chrome:

火狐:

Safari:

在这里试试 fiddle :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

The declaration is currently supported by: Safari 5, The Webkit Nightlies & Chrome.

Firefox already uses optimizeLegibility by default for text sizes above 20px.