我一直在试验 canvas 标签和 Javascript。我制作了一个页面，该页面从 Twitter 公共(public)时间线获取推文并将其动画化。它通过在动画背景中使用 Canvas 元素来工作。动画完成后，它会在顶部创建一个具有相同文本的 div 元素。我这样做是为了让推文文本可以选择并且链接可以点击。
现在，在 Safari、Chrome 甚至 Opera 中，canvas 文本和 div 文本看起来几乎完全一样。然而在 Firefox 中，文本的大小差异足以使其在变为 div 时“跳转”。
有谁知道如何使用 CSS 使 Firefox 在 canvas 元素和 div 上呈现相同的文本？或者这是与引擎的渲染不一致。
我已经把页面on my website如果你想明白我的意思。
现在是代码:
我用于呈现 div 的 CSS 包含:
line-height: 21px; font-weight: 100; font-family: Georgia, "New Century Schoolbook", "Nimbus Roman No9 L", serif; font-size: 20px;
为了在我使用的 Canvas 上渲染:
this.context.font = this.scale + 'px Georgia';
this.context.fillStyle = "white";
this.context.strokeStyle = 'white';
this.context.fillText(this.text, 0, 0);
this.context.strokeText(this.text, 0, 0);
其中 this.scale 是一个动画比例因子，精确到 20px。因此，回顾一下，我使用相同的字体并以相同的 px 大小结束，但 Firefox 在 Canvas 和 CSS 之间呈现不同的文本。
(edit) 这是一个截图示例: alt text http://danforys.com/temp/firefox-behaviour.png
第一行是使用 Canvas 动画的文本，第二行是生成的 div。
最佳答案
对了，我有一个 test case .
我用相同的文本并排创建了一个 div 和 canvas 元素。事实证明，字体渲染是一条红鲱鱼。 Firefox 的不同之处在于字符宽度的报告。我的 Twitter 可视化工具使用 measureText().width 计算每个字符的宽度并相应地放置它们。由于某些原因，Firefox 上的字符宽度较小。
奇怪的是，在测试用例中我测量了两件事:
- 整个文本的总宽度
- 文本中每个字符的宽度之和
在 Chrome 中，它们都以 399px 显示。在 Firefox 中，第一个显示为 393px，第二个显示为 367px。
编辑: 该错误已被关闭。 Mozilla 说 it's invalid ，我仍然说它与其他浏览器不一致。我必须找到另一种方法来做到这一点，或者找到足够的信息来说服 Mozilla 这毕竟是一个错误。无论如何，感谢您的收听!
关于javascript - 使 Firefox 渲染 Canvas 文本与 CSS 文本相同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2763349/