HTML5画布：在Chrome浏览器中，fillText的maxWidth参数会产生丑陋的结果。

Question

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

（编辑：更简单的复现） 要进行复现，您可以在这里查看右下角的框。

更新：最初的问题还提到了火狐浏览器存在问题，但那是一个错误。该问题似乎只存在于谷歌浏览器中。

- DLev

---

你熟悉http://jsfiddle.net吗？它允许你保存JavaScript演示并通过链接分享它们。（然而，从我所在的位置来看，它似乎出现了故障。） - apsillers

谢谢，这是jsfiddle链接。 - DLev

就我个人而言，不同的字体似乎没有相同的问题。我尝试了Calibri字体，它平滑得多。 - Snuffleupagus

在 Mac 上的 Chrome 23 和 25 看起来很好。 - net.uk.sweet

Answer 1

你的基本问题是maxWidth对渲染文本进行缩放，但大多数文本在非整数大小下缩放效果不佳... 基本上，如果你要求一个7.9像素的字体，它们就不会很好地适应像素网格，看起来会很丑陋。

除了使用更高DPI的显示器（我知道这不在你的控制范围内），避免API之外，没有太多可以做的了。 :(

- Boris Zbarsky

---

maxWidth不会缩放文本。您可以设置一个较小的maxWidth，看到文本在水平方向上被挤压，但垂直方向上不会。maxWidth应该影响字体布局，如hinting和kerning。大多数情况下它表现良好。但在这里表现特别糟糕。在"w"和"a"之间有许多空白像素，因此它没有清晰地提示正在命中像素边界。 - DLev

在 Firefox 中查看源代码，至少它正在进行后光栅水平缩放，所以你说的关于较小字号的评论是错误的。话虽如此，我无法在你的 fiddle 中重现“w”和“a”之间的额外像素，但我使用的是 hi-dpi 显示器... - Boris Zbarsky

嗨，Boris，感谢您深入了解！您说得对，在Firefox中我无法重现它，我一定记错了，因为我主要在Chrome中开发。我会更新问题。对于错误我很抱歉。 - DLev