Pourquoi mon CSS `@font-face` ne fonctionne-t-il pas dans Firefox, mais fonctionne dans Chrome et IE ?

CSS @font-face ne fonctionne pas dans Firefox mais fonctionne dans Chrome et IE

Problèmes rencontrés avec la fonctionnalité @font-face dans Firefox alors qu'il fonctionne de manière transparente dans Chrome et IE peut être déroutant. Cet article examinera les causes potentielles et les solutions.

Exécuter localement le site (file:///)

Firefox applique une politique stricte pour « l’origine de l’URI du fichier ». Pour aligner son comportement avec les autres navigateurs, modifiez la préférence suivante dans about:config:

• security.fileuri.strict_origin_policy

Changez sa valeur sur "false" pour permettre le chargement croisé des ressources de polices locales.< ;/p>

Publié Site

Pour les sites publiés, envisagez d'ajouter un en-tête supplémentaire dans .htaccess pour résoudre les problèmes potentiels entre domaines :

<FilesMatch ".(ttf|otf|eot)$"></p>
<pre class="brush:php;toolbar:false"><IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

Vous pouvez également explorer l'utilisation du codage base64 pour les polices de caractères comme solution de contournement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!