如何在Chrome中控制Canvas fillText()的字体字距调整? [英] How to control the font kerning for Canvas fillText() in Chrome?

问题描述

我正在尝试创建一个不错的画布文本跨浏览器渲染引擎.我注意到，字距调整对在Chrome中无法正常显示，但是在Safari和Firefox中它们可以正常工作.

I'm trying to create a decent cross-browser rendering engine of canvas text. I have noticed that kerning pairs don't render properly in Chrome, but in Safari and Firefox they work fine.

Chrome浏览器:

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);

有人有任何解决方法吗?我一直在寻找错误报告，但是什么也找不到.

Does anyone have any workaround? I have looked for bug reports, but I can't find anything.

推荐答案

来自要明确开启 font-kerning ，您需要将 font-kerning 属性设置为 normal ，

To explicitly turn on the font-kerning you need to set the font-kerning property to normal,

canvas{
    font-kerning : normal;
}

检查此 JSFiddle

根据跨浏览器字距调整对&连字，或者，您也可以像这样使用 optimizeLegibility

Based on this article on Cross-browser kerning pairs & ligatures, Alternatively you can use the optimizeLegibility like this,

canvas{
     text-rendering: optimizeLegibility;
}

选中此 JSFiddle

该声明当前受以下支持:Safari 5，Webkit晚装Chrome.

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

Firefox默认已经使用了optimizeLegibility作为文本大小高于20像素.

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

这篇关于如何在Chrome中控制Canvas fillText()的字体字距调整?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！