Javascript html5画布：fillText的maxWidth参数在Chrome中产生丑陋的结果

maxWidth参数可用于限制文本渲染的最大宽度，然而，在chrome中，我有时会得到非常奇怪的结果。这里是一个特别糟糕的例子，我需要将文本的宽度限制为几个像素。上面是对未指定maxWidth的fillText的调用。下面的示例有一个maxWidth。“w”和“a”之间的间距太大。有什么技巧或变通方法可以获得更好的结果吗

下面是用于示例的代码：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.font="8pt Arial";
ctx.fillText("Iowa", 10, 40);
ctx.fillText("Iowa", 10, 56, 21);

（编辑：更简单的复制） 要重新编程，您可以查看右下角的框

---

更新：最初的问题表明firefox也存在问题。那是个错误。问题似乎只出现在chrome中。

您的基本问题是maxWidth对渲染文本执行缩放，但大多数文本无法很好地缩放到非整数大小。。。基本上，如果你要求7.9px的字体，那么它就不适合像素网格，看起来很难看

---

就避免它而言。。。除了使用更高的DPI显示（我知道不是在您的控制下），除了避免API之外，您没有什么可以做的（

您熟悉吗？它允许您保存JavaScript演示并通过链接共享它们。（然而，目前它似乎出现故障，至少从我坐的地方看是如此。）谢谢，这里的FWIW不同的字体似乎没有相同的问题。我试用了Calibri，它平滑了很多。在Mac上的Chrome 23和25中看起来很好。maxWidth不会缩放文本。你可以设置一个小的maxWidth，并看到文本在水平方向上被压扁，但在垂直方向上不会。maxWidth应该会影响字体布局，如hinting和kerning。大多数时候它都很好。在这里它的性能特别差。在“w”和“a”之间有很多空白像素，所以这并不是在暗示要达到像素边界。从源代码上看，至少在Firefox中，它正在进行光栅化后的水平缩放，所以我对较小字体大小的评论是正确的。也就是说，我无法在你的小提琴上重现“w”和“a”之间的额外像素，但我在一个高dpi显示器上…嗨，博尔是的，谢谢你仔细看一看！你说得对，我不能在firefox中重新编程，我一定记错了，因为我主要是在chrome中开发的。我会更新这个问题。对于这个错误，我深表歉意。