Pourquoi ma règle CSS @font-face ne fonctionne-t-elle pas dans Firefox, mais elle fonctionne dans Chrome et IE ?

La règle CSS @font-face ne s'affiche pas dans Firefox malgré la compatibilité avec Chrome et IE

Lorsque vous rencontrez le problème selon lequel les règles @font-face définies dans CSS ne fonctionnent pas dans Firefox mais fonctionnel dans Chrome et IE, il est essentiel de prendre en compte divers facteurs pouvant affecter le rendu des polices. Voici deux solutions potentielles à explorer :

Environnement local (fichier:///)

Firefox applique par défaut une politique de sécurité stricte lors de l'accès aux fichiers locaux (fichier:///). Pour aligner son comportement avec les autres navigateurs, modifiez la préférence suivante dans "about:config":

• security.fileuri.strict_origin_policy

Définissez cette valeur sur false pour permettre à Firefox de charger des ressources de polices locales sur différents niveaux de répertoire.

Publié Site Web

Si le problème persiste sur un site Web publié, vérifiez si le problème d'accès aux polices est lié à des problèmes inter-domaines, même si des chemins relatifs sont utilisés. Pensez à ajouter l'en-tête suivant à votre fichier .htaccess pour les types de fichiers pertinents (.ttf, .otf, .eot) :

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

Bien qu'il soit peu probable que cette modification résolve le problème, il s'agit d'une étape de dépannage rapide. Vous pouvez également envisager d'utiliser l'encodage base64 pour intégrer la police de caractères, ce qui peut fonctionner dans ce scénario.

Pour plus d'informations, reportez-vous à la ressource suivante : [CSS @font-face : les fichiers locaux ne se chargent pas dans Firefox]( https://stackoverflow.com/questions/16392453/css-font-face-local-files-not-loading-in-firefox).

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!