如何在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 字体：

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

canvas{
    font-kerning : normal;
}

检查这个JSFiddle

基于这篇关于跨浏览器字距调整对和连字的文章，或者你可以使用optimizeLegibility这样的，

canvas{
     text-rendering: optimizeLegibility;
}

检查这个JSFiddle

该声明目前得到以下支持：Safari 5、Webkit Nightlies 和 Chrome。

默认情况下，Firefox 已经对超过 20 像素的文本大小使用了 optimizeLegibility。