javascript - 使 Firefox 渲染 Canvas 文本与 CSS 文本相同

Question

我一直在试验 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。

Answer 1

对了，我有一个 test case .

我用相同的文本并排创建了一个 div 和 canvas 元素。事实证明，字体渲染是一条红鲱鱼。 Firefox 的不同之处在于字符宽度的报告。我的 Twitter 可视化工具使用 measureText().width 计算每个字符的宽度并相应地放置它们。由于某些原因，Firefox 上的字符宽度较小。

奇怪的是，在测试用例中我测量了两件事:

1. 整个文本的总宽度
2. 文本中每个字符的宽度之和

在 Chrome 中，它们都以 399px 显示。在 Firefox 中，第一个显示为 393px，第二个显示为 367px。

编辑:该错误已被关闭。 Mozilla 说 it's invalid ，我仍然说它与其他浏览器不一致。我必须找到另一种方法来做到这一点，或者找到足够的信息来说服 Mozilla 这毕竟是一个错误。无论如何，感谢您的收听!