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

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

問題:

絶対 URL を指定した @font-face ルールを使用して外部ドメインからフォントを読み込むと、Firefox 13.0.1 ではフォントの読み込みに失敗します。

分析:

Firefox では、異なるドメインからロードされたフォントに対してアクセス制御ヘッダーを設定する必要があります。具体的には、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>

これにより、Access-Control-Allow-Origin ヘッダーが * に設定され、すべてのドメインがフォントをリクエストできるようになります。

その他の考慮事項:

• Apache を使用していない場合は、特定のサーバー ソフトウェアのドキュメントを参照して、アクセス コントロール ヘッダーの設定方法を確認する必要があります。
• 別のサブドメインでホストされているフォントも、アクセス コントロール ヘッダーを正しく設定する必要があります。
• CSS で使用されているフォントが実際に指定された URL でホストされており、Web ブラウザからアクセスするための適切な権限を持っていることを確認してください。

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