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

CSS @font-face Firefox では動作しないが Chrome と IE では動作する

@font-face 機能で問題が発生しましたFirefox ではシームレスに動作するのに、Chrome や IE では複雑になる場合があります。この記事では、考えられる原因と解決策について詳しく説明します。

サイトをローカルで実行する (file:///)

Firefox は「ファイル URI の起源」に対する厳格なポリシー。動作を他のブラウザと一致させるには、about:config で次の設定を変更します:

• security.fileuri.strict_origin_policy

値を「false」に切り替えて、ローカル フォント リソースのクロスパス ロードを許可します。< ;/p>

公開済みサイト

公開サイトの場合は、潜在的なクロスドメインの問題に対処するために .htaccess にヘッダーを追加することを検討してください:

<FilesMatch ".(ttf|otf|eot)$"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

ログイン後にコピー

あるいは、次のように探索することもできます。フォント書体に Base64 エンコーディングを使用する回避策。

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