使 Firefox 渲染画布文本与 CSS 文本相同

Question

我一直在尝试使用画布标签和 Javascript。我制作了一个页面，该页面从 Twitter 公共时间线获取推文并将它们动画化。它通过在动画背景中使用画布元素来工作。动画完成后，它会创建一个顶部带有相同文本的 div 元素。我这样做是为了让推文文本是可选择的并且链接是可点击的。

现在，在 Safari、Chrome 甚至 Opera 中，画布文本和 div 文本看起来几乎完全相同。然而在 Firefox 中，文本的大小不同，足以使其在变为 div 的位置“跳跃”。

有谁知道如何让 Firefox 使用 CSS 在画布元素和 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;

在我正在使用的画布上渲染：

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 是一个动画比例因子，精确到 20 像素。因此，回顾一下，我使用相同的字体并以相同的 px 大小结束，但 Firefox 在 Canvas 和 CSS 之间呈现不同的文本。

（编辑）这是一个截图示例： alt text http://danforys.com/temp/firefox-behaviour.png

第一行是使用画布动画的文本，第二行是生成的 div。

Answer 1

我看不出 Firefox 和 Chrome 之间有那么大的区别（除了速度...）。

你试过不使用strokeText吗？我认为文本通常只使用 fill-操作呈现。

很酷的应用程序，顺便说一句！

Answer 2

对，我有一个test case。

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

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

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

在 Chrome 中，它们都以 399 像素出现。在 Firefox 中，第一个为 393px，第二个为 367px。

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