Javascript 使Firefox呈现画布文本与CSS文本相同

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

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

有人知道如何让Firefox使用CSS在画布元素和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在画布和CSS之间呈现的文本不同

（编辑）以下是一个屏幕截图示例：

---

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

我看不出firefox和Chrome之间有多大区别（除了速度…）

您是否尝试过不使用

strokeText

？我认为文本通常只使用填充操作进行渲染

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

好的，我有一个

我用相同的文本并排创建了一个div和canvas元素。事实证明，字体渲染是一种误导。与Firefox不同的是报告字符宽度。我的Twitter visualiser使用measureText（）.width计算每个字符的宽度，并相应地放置它们。由于某些原因，Firefox上的字符宽度较小

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

整个文本的总宽度

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

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

编辑：

---

错误已被关闭。Mozilla说，我仍然认为它与其他浏览器不一致。我必须找到另一种方法来做到这一点，或者提供足够的信息让Mozilla相信这毕竟是一个bug。谢谢你的收听

谢谢你，马丁！是的，我试过使用和不使用strokeText。如果没有，文本看起来更薄，并且与三种浏览器中的div非常不同。CSS文本似乎既有笔划又有填充，或者具有与之相当的权重。还要注意CSS中的字体重量，将其更改为小于“粗体”的值似乎也没有任何区别。这只是因为我在做实验。如果你仔细观察文本开始向上移动的点，角色大小会跳跃。在Firefox中，如果你看到一条长推文，在右边有字符，这一点尤其明显。累积起来，线路长度有相当大的跳跃。至少在OSX上的FF3.6.3上有。有趣的是，Chrome的不同版本的渲染效果似乎也有所不同。在家（Chrome[稍后我会检查版本]在OSX snow leopard上，笔划和填充的文本看起来与div相同。在工作中，在leopard Chrome 5.0.342.9 beta上，笔划和填充的文本比div胖得多。我想我需要对此进行更多的研究……在家里我使用的是5.0.375.29 beta Chrome。我想我需要用屏幕截图对浏览器/版本进行PPK风格的比较。Disab在Windows中对FF3.6.3中的strokeText进行处理会导致画布文本看起来与CSS文本相同。我想知道这是否是操作系统字体支持而不是Firefox的问题？嗯，仔细看屏幕截图，可能是空格。字母看起来大小相似，但CSS分区中的空格看起来略宽。好的，我只能猜测这是一个Firefox Javascript错误。我已经报告过了：我不能在FF3.6中复制这个错误，所以这是最近的一个变化？你有没有玩过字母间距来看看你是否可以让它们对齐？这在我看来是不同的。另外，如果操作系统函数尊重例如字距参数，那么文本的总宽度可能不同于单字符widhts。如果您使用支持它的字体，您甚至可能会得到连字（即特殊字符）对于某些您无法使用您的方法模拟的字符组合。是的，我认为我的方法是错误的，但恰好在Webkit和Opera中工作。我不应该计算每个字符的宽度，而是应该计算整个字符串到当前字符的宽度，允许进行字距调整等。我已经计算了现在更新了我的网页，使其使用这种方法；现在它在Firefox上似乎工作得很好。（我昨天做了更新，这就是为什么ndp不能复制它的原因）感谢您的输入：）