Firefox で外部ドメインから @font-face フォントを読み込めないのはなぜですか?

@font-face 外部ドメインからの絶対 URL: Firefox の問題のトラブルシューティング

@font-face を使用した Web サイトへの外部フォントの組み込みこのルールは、一貫したタイポグラフィとブランディングを確保するために不可欠です。ただし、フォントを外部ドメインでホストし、Firefox にロードしようとすると、フォントが適切にレンダリングされないというイライラする問題が発生する可能性があります。

この問題は、Firefox が同一オリジン ポリシーを適用していることが原因で発生します。 @font-face リクエストに応じて。別のドメインからフォントをロードしようとすると、フォント ファイルにアクセス コントロール ヘッダーが提供されていない限り、ブラウザはエラーをトリガーします。

Apache の問題の解決

この問題を解決し、Firefox でクロスオリジン フォントの読み込みを許可するには、適切なヘッダーを送信するように Web サーバーを設定する必要があります。 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>

この構成により、必要な Access-Control-Allow-Origin ヘッダーが値「*」で追加され、 Firefox は、指定された外部ドメインからフォントをロードします。

これらのヘッダーを配置すると、Firefox は意図したとおりにフォントにアクセスしてレンダリングできるようになり、Web ページ全体でシームレスで一貫したタイポグラフィ エクスペリエンスが確保されます。

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