12

ローカルホストでも、Firefoxで正しく表示するためにfont-awesomeを取得できません。次のクロスドメインエラーが発生します。

Timestamp: 08/08/2012 02:49:37 PM
Error: downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal     `src index:2): bad URI or cross-site access not allowed
source: http://localhost:3000/djpsite/baseadmin/font/fontawesome-webfont.ttf
Source File: http://localhost:3000/djpsite/baseadmin/css/font-awesome.css
Line: 0
Source Code:
@font-face {   font-family: "FontAwesome";   font-style: normal;   font-weight: normal;   src: url("../font/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("../font/fontawesome-webfont.woff") format("woff"), url("../font/fontawesome-webfont.ttf") format("truetype"), url("../font/fontawesome-webfont.svg#FontAwesome") format("svg"); }

この投稿で提案されているように、二重引用符を使用しました。firefox@ font-faceはfontawesomeで失敗しますが、問題は解決しませんでした。

Chromeではすべてが正常に機能します。助言がありますか？

Chromeの問題を修正する以外に、次の制限がある場合、CDNでfont-awesomeをどのように販売する必要がありますか：http：//dev.w3.org/csswg/css3-fonts/#default-same-origin-restriction？

以下は私のCSSファイルからのコードです：

@font-face {
    font-family: 'FontAwesome';
    src: url("../font/fontawesome-webfont.eot");
    src: url("../font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'),
    url("../font/fontawesome-webfont.woff") format('woff'),
    url("../font/fontawesome-webfont.ttf") format('truetype'),
    url("../font/fontawesome-webfont.svg#FontAwesome") format('svg');
    font-weight: normal;
    font-style: normal;
}

ご協力いただきありがとうございます！

4

5 に答える 5

22

これにより、Firefox のクロス ドメイン フォントの問題が解決されました (フォントが Firefox に読み込まれません)。以下を apache config に追加する.htaccessか、直接追加します。

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

さまざまなサーバーで CORS をセットアップする方法が記載された Web ページがあります: https://enable-cors.org/server.html

于 2013-01-13T21:30:52.473 に答える
3

this のように、ローカル宣言を追加するとこれが修正されることがよくあります。例えば：

@font-face {
  font-family: "Your typeface";
  src: url("type/filename.eot");
  src: local("☺"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
}

Apache の設定方法の方が正しいと確信していますが、Apache を使用していないか、そのようなオーバーライドを行う機能がない可能性があります。

于 2012-10-21T10:53:14.833 に答える
2

Rails アプリ (またはその他のラック ベースのアプリ) を構築している場合は、https://github.com/cyu/rack-corsを参照してください。非常に簡単に起動して実行できます。環境ファイルまたは環境ファイルの 1 つにスローできapplication.rbます。

于 2013-06-12T20:30:23.330 に答える