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の最後の属性の後にセミコロンがないことを除いて、両方のコードがまったく同じであることがわかります（圧縮されているという事実を無視する場合）。セミコロンの欠如はこの問題を引き起こしますか？

質問で説明されている問題は、すべてのパスをから./に変更することにより/fonts/（たとえばに./fontawesome-webfont.ttf変更する/fonts/fontawesome-webfont.ttf）、カーンアカデミーによって修正されました。Firefoxは特別な「ドット」ディレクトリ（単に現在のディレクトリを参照）からファイルを読み取ることができないように思えます。

PS：最後の属性の後にCSSにセミコロンがなくても、この問題は発生しません。

追加コメント：

.プレフィックスに関する編集は、Firefoxがファイルを処理する方法ではなく、サーバーの問題です。KAは間違った場所からフォントファイルを参照していました– ランダム

間違っています！フォントは、他の3つのブラウザーで既に問題なく言及しているように、正しく機能しました。つまり、フォントは正しい場所にありました。./私が説明したように、それは明らかにFirefoxのパスの問題であり、KAがフォントファイルを不要な新しい場所に移動することを強制し、./Firefoxもフォントファイルを正しく読み取ることができました。したがって、それはある Firefoxはファイルをどのように扱うかという問題。

おそらくない提起質問への答えが、スクリーンショットに示すように、同じ結果を生成し、わずかに異なる問題で、ここで終わるのヘルプの人々に関連する十分。

Firefoxは、異なる（サブ）ドメインにあるフォントの使用をブロックします

また、その投稿のコメントを読んで、彼らは良いアドバイスを与えます。

IE、Firefox、Chromeを正しく実行するために、次のようにパスを変更しました：（表示するURL）

@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 }