質問: firefoxはfont awesome webfontセットからアイコンをレンダリングできません firefox(windows 7)では、 font awesome パッケージから呼び出されたアイコンとグリフが正しくレンダリングされません。この例は、カーンアカデミーのウェブサイトで見ることができます。ビデオの下に、アイコンは16進コードを含むボックスとして表示されます。これは、firefoxによってダウンロードされていないことを意味します。chrome(windows 7)、safari(mac os x)、stainless(mac os x))での表示方法:私は stack overflowに関するこの質問 を見つけました。これはなぜこれが発生するのかを説明している可能性があります-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の最後の属性の後にセミコロンがない(圧縮されているという事実を無視した場合)。セミコロンの欠如がこの問題の原因ですか?
回答: ie、firefox、およびchromeを正しく実行するようにパスを変更しました:( rl to see )@font-face{ font-family:'fontawesome'; src:url('ogi/bete/font/fontawesome-webfont.eot?v=3.0.1'); src:url('/ogi/bete/font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), url('/ogi/bete/font/fontawesome-webfont.woff?v=3.0.1') format('woff'), url('ogi/bete/font/fontawesome-webfont.ttf?v=3.0.1') format('truetype'); font-weight:normal; font-style:normal }