CSS @font-face が Firefox で機能しないのはなぜですか?

CSS @font-face が Firefox でレンダリングされない

Google Chrome と Internet Explorer では正しく機能するにもかかわらず、CSS @font-face ルールFirefox では動作しません。 @font-face コードは有効であるように見えますが、問題は Firefox に固有のものであるようです。この不一致のトラブルシューティングを行うには、Firefox 内の構成と設定を理解する必要があります。

ローカル ファイル URI ポリシー

Firefox は、ファイル URI の起源 (file:///) に関して厳格なポリシーを採用しています。 、ローカル リソースの読み込みを妨げる可能性があります。この問題に対処するには、Firefox のアドレス バーで「about:config」に移動し、「fileuri」でフィルタリングし、「security.fileuri.strict_origin_policy」設定を false に切り替えます。これにより、Firefox はローカル フォント リソースを処理するときに他のブラウザと同様に動作できるようになります。

クロスドメインの問題

サイトが公開されても問題が解決しない場合は、次の可能性があります。潜在的なクロスドメインの問題を考慮する必要があります。コードで相対パスが指定されている場合でも、.htaccess ファイルに追加のヘッダーを追加することをお勧めします。

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

このヘッダーは、潜在的なクロスドメイン制限を防ぐ必要があります。さらに、フォント書体に Base64 エンコーディングを使用することも可能であり、これによって問題が解決される可能性もあります。

詳細情報と包括的な概要については、回答に記載されているリソースを参照してください。

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