html - 如何使 HTML5 MeasureText() 和 FillText() 跨浏览器保持一致

Question

我在使用 HTML5 Canvas 渲染某些文本时遇到问题，您可以在 http://jsfiddle.net/qcVAV/ 上看到该问题.

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

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

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

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

Answer 1

抱歉，你运气不好!

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

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

使 fillText 保持一致的唯一方法是使用图像而不是文本。 It's must faster, anyway .

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