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

Chrome と IE で互換性があるにもかかわらず、CSS @font-face ルールが Firefox でレンダリングされない

CSS で定義された @font-face ルールが機能しないという問題が発生した場合Firefox では機能しますが、Chrome と IE では機能が異なるため、フォントのレンダリングに影響を与える可能性のあるさまざまな要因を考慮することが重要です。以下に検討すべき 2 つの解決策を示します。

ローカル環境 (file:///)

Firefox は、デフォルトでローカル ファイル (file:///) にアクセスするときに厳格なセキュリティ ポリシーを適用します。動作を他のブラウザと一致させるには、「about:config」で次の設定を変更します:

• security.fileuri.strict_origin_policy

この値を false に設定します。 により、Firefox がさまざまなディレクトリ レベルにわたってローカル フォント リソースを読み込めるようになります。

公開Web サイト

公開 Web サイトで問題が解決しない場合は、相対パスが使用されている場合でも、フォント アクセスの問題がクロスドメインの問題に関連しているかどうかを確認してください。関連するファイル タイプ (.ttf、.otf、.eot) の .htaccess ファイルに次のヘッダーを追加することを検討してください:

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

この変更によって問題が解決される可能性は低いですが、簡単なトラブルシューティングの手順になります。あるいは、base64 エンコーディングを使用してフォント書体を埋め込むことを検討してください。これはこのシナリオで機能する可能性があります。

詳細なガイダンスについては、次のリソースを参照してください: [CSS @font-face: Firefox にローカル ファイルが読み込まれない]( https://stackoverflow.com/questions/16392453/css-font-face-local-files-not-loading-in-firefox).

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