Question

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

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

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

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

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

是的，我有test case。

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

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

整个文字的总宽度
文本中每个字符宽度的总和

在Chrome中，它们均以399px的速度出现。在Firefox中，第一个是393px，第二个是367px。

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

Answer 2

我看不出firefox和Chrome之间的差异（除了速度......）。

您是否尝试过不使用strokeText？我认为通常只使用 fill -operations来呈现文本。

酷应用，顺便说一下。

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

2 个答案: