在Chrome中Canvas fillText（）和字距对

Question

我正在尝试创建一个体面的跨浏览器渲染引擎的画布文本。但我已经注意到，字距对在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版&铬。

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