外部ドメインからの絶対 URL で @font-face を使用すると、フォントが Firefox に読み込まれないのはなぜですか?

Firefox のクロスドメイン @font-face の制限について

質問: @font- を使用するとフォントが Firefox に読み込まれないのはなぜですかface が外部ドメインの絶対 URL で使用されていますか?

問題の説明:

提供されたコード スニペットは @font-face を利用して、「fwy.pagodabox. com」をShopifyストアで使用します。ただし、Firefox 13.0.1 ではこれらのフォントが読み込まれないため、これが Firefox の機能の問題なのか、それとも CSS で使用されている構文の問題なのかという疑問が生じます。

回答:

Firefox は、特定のアクセス制御ヘッダーが設定されていない限り、@font-face を介して外部ドメインからフォントを読み込むことに制限を課します。別のドメインでフォントをホストする場合は、* (ワイルドカード) の値を持つ Access-Control-Allow-Origin ヘッダー、またはフォントの要求元の特定のドメインを含めるようにサーバーを構成することが重要です。これにより、ブラウザはドメイン境界を越えてフォントにアクセスできるようになります。

Apache サーバーの場合、次のディレクティブを .htaccess ファイルに追加して、クロスドメイン フォントの読み込みを有効にすることができます:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
<FilesMatch "\.(ttf|otf|eot)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

これらのアクセス制御ヘッダーを実装すると、pagodabox サーバーでホストされているフォントに Shopify ストアからアクセスできるようになり、フォントが Firefox に正しく読み込まれるようになります。

以上が外部ドメインからの絶対 URL で @font-face を使用すると、フォントが Firefox に読み込まれないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。