web-dev-qa-db-ja.com

Font-Firefoxで正しく表示されない素晴らしい/ CDN経由で販売する方法は？

ローカルホストでも、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 fail with 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;
}

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

cssfirefoxcross-domainfont-awesome
12
Alan Illing

This Firefoxのクロスドメインフォントの問題を解決しました（これにより、Firefoxにフォントが読み込まれなくなります）。以下を.htaccessに追加するか、Apacheconfigに直接追加します。

<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

21
István Ujj-Mészáros

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 configメソッドの方が正しいと確信していますが、Apacheを使用していないか、そのようなオーバーライドを行う機能がない可能性があります。

3
spikyjt

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

2
jeremywoertink

私の場合のようにAWSCloudfrontを使用している場合は、 CORSポリシーを追加 する必要があります。 S3では、代わりにポリシーを使用する必要があるため、アップロード中にヘッダーを意図的に設定することはできません。

このポリシー構成はあなたのためにトリックをするはずです：

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

これにより、FirefoxおよびInternet Explorer（IE）のCDSからFont-Awesomeが機能するようになります。

2
Joseph Lust

私はmagento2.0でも同じ問題を抱えていました。 httpsでは正常に機能していましたが、httpでは機能していませんでした。 font-awesomeアイコンをhttpにロードできるようにするため。 magentoインストールのルートディレクトリにある.htaccessに以下を追加しました。

<FilesMatch ".(ttf|otf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>
0
Umar Yousaf