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

Question

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

Chrome:

Firefox:

野生动物园：

在此处尝试 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.

Answer 2

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

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

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

我们的解决方案是通过将每个 "letter" 一个接一个地绘制到 canvas 上来防止发生字距调整。为此，您需要使用字体文件中的字体规格来计算字形宽度。

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

How to control the font kerning for Canvas fillText() in Chrome?

javascript

google-chrome

canvas

fonts

kerning