我正在尝试创建一个体面的跨浏览器渲染引擎的画布文本。我注意到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报告,但找不到任何东西。
要明确打开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。
它没有多大帮助,但我们在浏览器中运行的文本处理器应用程序遇到了同样的问题。
我们尝试了以下不起作用的画布设置:
none
应该禁用字距调整,但它不起作用)optimizeSpeed
应该禁用字距调整,但它不起作用)0
应该禁用字距调整,但它不起作用)我们的解决方案是通过将每个“字母”一个接一个地画在画布上来防止字距调整发生。但是,您需要使用字体文件中的字体度量来计算字形宽度。