如何使 HTML5 MeasureText() 和 FillText() 跨浏览器一致答案

【问题标题】：How do I make the HTML5 MeasureText() and FillText() consistent cross-browser如何使 HTML5 MeasureText() 和 FillText() 跨浏览器一致
【发布时间】：2012-09-10 02:50:09
【问题描述】：

我在使用 HTML5 Canvas 呈现一些文本时遇到问题，您可以在 http://jsfiddle.net/qcVAV/ 看到。

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

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

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

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

【问题讨论】：

标签： html canvas cross-browser render

【解决方案1】：

对不起，你运气不好！

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

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

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

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

【讨论】：