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

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

La règle CSS @font-face vous permet d'ajouter des polices personnalisées à votre site Web. Cependant, dans ce cas, la règle fonctionnait parfaitement dans Chrome et Internet Explorer, mais pas dans Firefox.

Problème de système de fichiers local

Firefox applique une « origine uri de fichier » stricte (fichier :/ //) politique par défaut. Si vous exécutez votre site localement à l'aide du protocole file:///, Firefox n'autorisera pas l'accès aux polices entre domaines.

Pour résoudre ce problème, chargez votre site à l'aide du protocole http:// ou désactivez le suivant les préférences de Firefox :

security.fileuri.strict_origin_policy

Problème inter-domaines du site publié

Si vous rencontrez ce problème après Lors du déploiement de votre site, il est possible que votre navigateur interprète les chemins relatifs des polices comme des requêtes inter-domaines. Pour éviter cela, ajoutez l'en-tête suivant à votre fichier .htaccess :

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

Cela demande au serveur d'envoyer un en-tête supplémentaire avec chaque demande de fichier de police, permettant l'accès depuis n'importe quel domaine.

Autres solutions possibles

Si les étapes ci-dessus ne résolvent pas le problème, envisagez d'utiliser l'encodage base64 pour la police de votre police. Bien que ce ne soit pas la solution idéale, cela peut fonctionner en dernier recours.

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!