web-dev-qa-db-ja.com

FontAwesomeがFirefoxで表示されない

関連する質問 こちら 。

上記の質問に対するボリスの答えは理にかなっているようですが、Font Awesomeファイルをサーバーにインストールしましたが、問題は残ります。

enter image description here

ライブラリを調べたところ、フォントファイルがインストールに含まれていることがわかりました。そのため、フォントへのクロスサーバーアクセスに関する議論は有効ではないようです。 BootstrapCDNを使用しても構いませんが、Borisの提案が当てはまるようで、正しいCORSヘッダーを送信する方法がわかりません。 （試してみましたが、機能しません。）「ブートストラップCDN」または「デフォルトCSS」を使用して、これを修正する方法はありますか？ （ これらの手順 も参照してください。）

PS：IE10はグリフを正しく表示します。

firefoxfont-awesome
21
stevenvh

Bootstrap CDN？

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">セクションに<head>を含めるだけです。フォントファイルもCDNから自動的にロードされます。

Firefoxでこれを確認し、完全に機能します。

@ボリスは言う：

Firefoxは、フォントが存在するサーバーが正しいCORSヘッダーを送信する場合にのみ、フォントのクロスドメインリンクを許可します。

したがって、正しいヘッダーを設定することはCDNs dutyであること、not yoursであることは明らかです。そして、Firefoxは文句を言わないので、彼らは正しくそれをするようです。

独自のサーバーでフォントをホストする場合、クロスドメインルールが適用される場合があることに注意してください。 domain.comが正しいヘッダーを送信しない場合、www.domain.comの下のフォントファイルはwww.domain.comからアクセスできない場合があります。

クロスサブドメインの制限を回避するためのヒントについては、 この回答 をお読みください-これはあなたの場合に役立つかもしれません。

41
Michał Rybak

fontawesome cssをローカルで動作させるための解決策は、Fontsフォルダーの下のファイルを.htmlファイル（ページ）と同じディレクトリに含めることです。

例：fontawesomeが機能しない現在のファイル構造

    prototype\pages\.html files
    prototype\styles\font-awesome\css\font-awesome.min.css
    prototype\styles\font-awesome\css\fonts\fontawesome-webfont.eot,fontawesome-webfont.woff

ここでの問題は、file：// URIからロードされたページの場合、ファイルシステムの同じディレクトリ内（またはそれ以下）のファイルのみが「同じOrigin」と見なされるため、フォントを異なるサブツリー（。 ./font/）は、セキュリティポリシーの制限によりブロックされることを意味します。Firefoxはクロスドメインフォントをデフォルトで無効にするため、代わりにファイル構造を次のように変更します。

      prototype\pages\.html files
      prototype\styles\font-awesome\css\font-awesome.min.css
     prototype\pages\fonts\fontawesome-webfont.eot,fontawesome-webfont.woff

問題を解決するページディレクトリの下にフォントフォルダーを配置します。

0
Vilma Sherin

自分のサーバーの所有者である場合は、httpヘッダーを追加してその問題に対処できます。クロスドメインポリシーに基づく問題。

foo.com/font-awesome.woff

boo.com/index.htm

その場合、そのヘッダーをfoo.comに追加する必要があります

Access-Control-Allow-Origin = "http://boo.com"

または

Access-Control-Allow-Origin = "*"

これにより、フォントファイルが他のサイトまたは特定のサイトからアクセス可能になります。

0
Bora Alp Arat

私は同じ問題を抱えています、マイクロhttpdを使用してルーターボード上のフォントを使用します。 Access-Control-Allow-Origin：*ヘッダーを追加しましたが、機能していません。

fireoffで、woffファイルが応答テキストの何も取得していないことがわかりました。 CDN URLを使用する場合も同じことですが、すべて正常に動作します。そのため、ローカルのmicro-httpdサーバーでは、構成するためにいくつかの必須ヘッダーが必要です。必要なすべてのフォントの正確なMIMEタイプも教えてください。

  • .ttf」、「application/x-font-ttf」
  • .eot」、「application/vnd.ms-fontobject」
  • .woff」、「application/font-woff」
  • .svg」、「image/svg + xml」
0
user3539950