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

Question

我一直在尝试使用canvas标签和Javascript.我创建了一个页面,从Twitter公共时间轴上获取推文并将其动画显示.它的工作原理是在动画的背景中使用canvas元素.动画完成后,它会在顶部创建一个div元素,文本相同.我这样做是为了使推文文本可以选择,链接是可点击的.

现在,在Safari,Chrome甚至Opera中,画布文本和div文本看起来几乎完全相同.然而在Firefox中,文本的大小不同,足以使它在转换为div时"跳跃".

有谁知道如何让Firefox使用CSS在canvas元素和div上渲染文本相同？或者这是与引擎的渲染不一致.

如果你想看看我的意思,我已将网页放在我的网站上.

现在代码:

我用于渲染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是一个动画缩放因子,精确到20px.因此,回顾一下,我使用相同的字体并以相同的px大小结束,但Firefox在Canvas和CSS之间呈现不同的文本.

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

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

Answer 1

对了，我有一个测试用例。

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

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

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

在 Chrome 中，它们的分辨率均为 399 像素。在 Firefox 中，第一个结果为 393px，第二个结果为 367px。

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