javascript - 无法在 Firefox canvas 中绘制斜体文本

Question

在 canvas 中绘制斜体文本时，Firefox 会像 Impact 这样的字体正常渲染它们。

var ctx = canvas.getContext('2d');
ctx.font = "italic 40px Impact";
ctx.fillText("Impact", 0, 40);

View on jsFiddle

火狐

Chrome

有什么解决办法吗？

Answer 1

这是因为 Impact 没有附带斜体版本。当您在字体查看器(如 Mac Font Book)中查看它时，您可以看到它。浏览器在没有它的字体上伪造斜体，但 Firefox 还没有在 Canvas 上伪造它。如果您尝试使用带有斜体的字体，例如 Arial，它在 Canvas 中有效。

这里有一些关于这个的讨论:Italic doesn't work on all fonts in Firefox

演示:

ctx.font = "italic 40px Arial";