web-dev-qa-db-ja.com

Firefoxでダウンロード可能なフォント：不正なURIまたはクロスサイトアクセスが許可されていません

私は http://www.beperk.com （問題を確認できるようにURLを提供しています）のウェブマスターで、@ fontを使用すると多くの問題が発生しますCSSの-face。

Zurb dot comのファウンドアイコンを使用したいので、Amazon S3でホストしました。

ここで指定されているように、クロスドメインアクセスを許可するようにバケットを設定します。 http://docs.aws.Amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors =

そして、すべてがwebkit、trident、geckoでシー​​ムレスに動作し始めました...ほとんど：Firefox（バージョン17、18、19でテスト済み）でWebを閲覧すると、すべてのアイコンがこのエラーでランダムに失敗します：

Timestamp: 22/02/13 13:18:01
Error: downloadable font: download failed (font-family: "GeneralFoundicons" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed

そして、ページを完全にリロードした後（コントロール/コマンド+ Rを使用）、すべてのアイコンが通常は何度か表示された後に再び失敗するように見えるため、ランダムに言います。

誰でも問題を見つけることができますか？

cssamazon-s3cross-domainfont-facegecko
32
dolarsrg

サーバーに次を追加する必要があります。

Access-Control-Allow-Origin

フォントファイルのヘッダーに、たとえばApacheを使用している場合は、これを.htaccessに追加できます。

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

誰かがローカルリソースを使用していて、firefoxでこの問題に直面している場合。 about:configに移動して、security.fileuri.strict_Origin_policy設定をfalseに変更できます。

参照： https://developer.mozilla.org/en-US/docs/Same-Origin_policy_for_file:_URIs

12
thanh

次のような実装されたbase64エンコードフォントを使用してみてください。

@font-face {
 font-family:"font-name";
 src:url(data:font/opentype;base64,[paste-64-code-here]);
 font-style:normal;
 font-weight:400;
}

参照： http://sosweetcreative.com/2613/font-face-and-base64-data-uri

完璧に機能しました。

5
matt hias