HTML Canvas 在不同浏览器中呈现文本的方式略有不同答案

【问题标题】：HTML Canvas is rendering text slightly differently accross browsersHTML Canvas 在不同浏览器中呈现文本的方式略有不同
【发布时间】：2011-06-24 13:31:30
【问题描述】：

我正在开发一个严重依赖于知道画布上每个文本字符的确切 x 和 y 位置的 Web 应用程序。问题是不同的浏览器不会以相同的比例渲染每个字符。

我使用的字体是Courier New，我已经在 Chrome 9、FF4 beta 和 Chrome 9 beta 中测试过。

我想知道是否有什么可以做的。另外，是因为浏览器本身处理文本的方式还是纯粹的画布 API？

【问题讨论】：

您是如何绘制文本的，哪些浏览器存在差异，您是否验证过您使用的字体在每个浏览器/平台上都完全相同？
如果您使用 Flash 而不是 Canvas 来渲染您的绘图，它将在所有浏览器和平台上实现像素完美。

标签： javascript html text canvas 2d

【解决方案1】：

我记得article 关于不同浏览器之间的互操作性测试。每个浏览器对字体的处理是不同的。 CSS 和变换中的权重或旋转也存在差异。我不认为你能在每一个中实现完美的渲染

【讨论】：

太遗憾了，看起来我可能不得不使用单独的 fillText() 调用来渲染每个角色，只要它不影响性能。