web-dev-qa-db-ja.com

FirefoxはFont Awesome webfontセットからアイコンをレンダリングできません

Firefox（Windows 7）では、 Font Awesome パッケージから呼び出されたアイコンとグリフが正しくレンダリングされません。この例は、カーンアカデミーのウェブサイトで見ることができます。ビデオの下に、アイコンは16進コードを含むボックスとして表示されます。これは、Firefoxによってダウンロードされていないことを意味します。

How the icons appear in Firefox

Chrome（Windows 7）、Safari（Mac OS X）、Stainless（Mac OS X））での表示方法：

How the icons appear in other browsers

私は 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の最後の属性の後にセミコロンがない（圧縮されているという事実を無視した場合）。セミコロンの欠如がこの問題の原因ですか？

firefoxfonts
20
ADTC

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

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

追加コメント：

.接頭辞に関する編集はサーバーの問題であり、Firefoxがファイルを処理する方法ではありません。 KAが間違った場所からフォントファイルを参照していた– ランダム

不正解です！フォントは他の3つのブラウザでも正しく動作しました。これは、以前に質問したとおりです。つまり、フォントは正しい場所にありました。私が説明したように、./パスに関するFirefoxの問題は明らかにKAにフォントファイルを./を必要としない新しい場所に移動させ、Firefoxもフォントファイルを正しく読み取ることができるようにしました。したがって、それはFirefoxがファイルを処理する方法の問題です。

12
ADTC

おそらくthe答えられていない質問に答えますが、ここに示されているのと同じ結果を生成するわずかに異なる問題でここに到達する人々を助けるのに十分関連していますスクリーンショット。

Firefoxが別の（サブ）ドメインにあるフォントの使用をブロックしている

その投稿へのコメントも読んでください、彼らは良いアドバイスをします。

1
Pim Schaaf

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 }
0
Herson Tamin