@font-face が Firefox では機能しないのに、Chrome と IE では機能するのはなぜですか?

CSS @font-face が Chrome と IE では機能するが、Firefox では機能しない理由

CSS @font-face ルールを使用すると、Web サイトにカスタム フォントを追加できます。ただし、この場合、ルールは Chrome と Internet Explorer では完全に機能しましたが、Firefox では機能しませんでした。

ローカル ファイル システムの問題

Firefox は厳密な「ファイル URI オリジン」(file:/) を強制します。 //) デフォルトのポリシー。 file:/// プロトコルを使用してサイトをローカルで実行している場合、Firefox ではクロスドメイン フォント アクセスが許可されません。

この問題を解決するには、http:// プロトコルを使用してサイトをロードするか、以下の Firefox 設定:

security.fileuri.strict_origin_policy

公開サイトのクロスドメイン問題

サイトの展開後にこの問題が発生した場合は、ブラウザが相対フォント パスをクロスドメイン リクエストとして解釈している可能性があります。これを防ぐには、.htaccess ファイルに次のヘッダーを追加します。

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

これにより、各フォント ファイル リクエストで追加のヘッダーを送信するようにサーバーに指示され、任意のドメインからのアクセスが許可されます。

その他の考えられる解決策

上記の手順で問題が解決しない場合は、フォント タイプフェイスに Base64 エンコードを使用することを検討してください。これは理想的な解決策ではありませんが、最後の手段として機能する可能性があります。

以上が@font-face が Firefox では機能しないのに、Chrome と IE では機能するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。