FirefoxはFont Awesome webfontセットからアイコンをレンダリングできません
Firefox(Windows 7)では、Font Awesomeパッケージから呼び出されるアイコンとグリフが適切にレンダリングされません。この例は、カーンアカデミーのWebサイトで見ることができます。ビデオの下には、16進コードが入ったボックスとしてアイコンが表示されます。これは、Firefoxによってダウンロードされていないことを意味します。 Chrome(Windows 7)、Safari(Mac OS X)、およびステンレス(Mac OS X)での表示方法: スタックオーバーフローでこの問題が発生した理由を説明しているこの質問を見つけました-CSSは、単一引用符を使用してフォントのsrcロケーションを囲みます。ただし、Khan Academyサーバーへの書き込みアクセス権がないため、実際のWebサイトを変更することはできません。Firefoxでこれを修正できるかどうか、およびその方法を知りたい。それが役立つ場合は、Greasemonkeyスクリプトを実行できます。フォントを手動でダウンロードしてWindowsのFontsフォルダーに追加しようとしましたが、これは役に立ちません。 参考までに、このフォントを設定するCSS(Firefoxによって適切に処理されない)は次のとおりです。 @font-face { font-family:'FontAwesome'; src:url('./fontawesome-webfont.eot'); src:url('./fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('./fontawesome-webfont.woff') format('woff'), url('./fontawesome-webfont.ttf') format('truetype'), url('./fontawesome-webfont.svg#FontAwesome') format('svg'); font-weight:normal; font-style:normal } [class^="icon-"]:before, [class*=" icon-"]:before { font-family:FontAwesome; font-weight:normal; font-style:normal; display:inline-block; text-decoration:inherit } 更新: FirefoxはFont AwesomeパッケージのWebサイト(上記のリンク)にフォントベースのアイコンを正しく表示することがわかりました。CSSを調べ、カーンアカデミーのCSSと比較すると、KAのCSSの最後の属性の後にセミコロンがないことを除いて、両方のコードがまったく同じであることがわかります(圧縮されているという事実を無視する場合)。セミコロンの欠如はこの問題を引き起こしますか?