3

我对 HTML5 Canvas 的一些文本渲染有问题，您可以在http://jsfiddle.net/qcVAV/看到。

似乎 Firefox 和 Internet Explorer 测量文本并一致地填充它，但 Chrome 没有。

在提供的链接中，您将看到 Internet Explorer 和 Firefox 看起来相同，并且 measureText 调用显示提供的文本测量为 1679。在 Firefox 中，有额外的精度。然而，对于 Chrome，文本的大小为 1651。

我尝试添加 css 重置http://cssreset.com - 因为我认为也许 css 可能会把事情扔掉。

我还能做些什么（如果有的话）来使文本一致地呈现？

4

1 回答 1

2

对不起，你在这里不走运！

文本不仅在每个浏览器上的测量方式不同，它的缩放和呈现方式也大不相同！尝试将字体大小乘以 4 并将比例乘以 4，结果可能会让您大吃一惊。某些浏览器中的字距调整将关闭，并且在应用比例时 Opera 看起来很糟糕。

保持一致的唯一方法measureText是预先计算。

保持一致的唯一方法fillText是使用图像而不是文本。无论如何，它必须更快。

如果文本非常动态，那么这两种方法都是站不住脚的，但是如果你只在应用程序中写过少于 100 条不同的文本，那么图像可能是你最好的选择。

于 2012-09-18T01:28:45.063 回答