javascript - Firefox キャンバスで斜体のテキストを描画できない

Question

キャンバスにイタリック体のテキストを描画すると、Firefox は通常のImpact.

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

jsFiddle で表示

ファイアフォックス

クロム

これを解決する方法はありますか？

Answer 1

これは、Impact には斜体バージョンが付属していないためです。これは、フォント ビューア (Mac Font Book など) で表示すると確認できます。ブラウザはイタリック体を持たないフォントでイタリック体を偽装しますが、Firefox はまだキャンバスでイタリック体を偽装していません。Arial などのイタリック体を含むフォントを試してみると、キャンバスで機能します。

これについてはいくつかの議論があります: Italic doesn't work on all fonts in Firefox

デモ：

ctx.font = "italic 40px Arial";