38

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

zurb dot com のfoundicons を使用したいので、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を使用）、すべてのアイコンが正常に表示され、何度かアクセスすると再び失敗するため、ランダムに言います。

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

4

4 に答える 4

50

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

Access-Control-Allow-Origin

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

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>
于 2013-02-22T13:47:31.960 に答える
14

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

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

于 2016-11-14T09:48:19.443 に答える
6

次のような、実装された 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

それは完全に機能しました。

于 2014-06-10T09:25:21.173 に答える