Pourquoi ma @font-face ne fonctionne-t-elle pas dans Firefox ?

CSS @font-face ne fonctionne pas dans Firefox : résolution des problèmes d'hébergement inter-domaines et locaux

Firefox présente des particularités dans le rendu des polices personnalisées définies en utilisant la règle @font-face, en particulier lorsque les fichiers HTML et CSS résident localement ou sur des sites différents. domaines.

Hébergement local (fichier:///)

Firefox applique une politique d'origine stricte pour l'accès aux fichiers locaux (fichier:///). Pour résoudre ce problème :

• Accédez à about:config dans la barre d'adresse de Firefox.
• Filtrez par « fileuri » et basculez « security.fileuri.strict_origin_policy » sur false.

Cela permet à Firefox d'accéder aux ressources de polices locales quel que soit le chemin du document niveaux.

Site publié

Si le problème persiste sur un site Web publié, cela vaut la peine d'envisager :

• Ajout d'un contrôle d'accès- En-tête Allow-Origin des fichiers .ttf, .otf et .eot dans le fichier .htaccess fichier :

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

• Vous pouvez également encoder en base64 la police de caractères (bien que cela ne soit pas recommandé pour l'esthétique).

Informations supplémentaires

Pour un aperçu complet de ce problème, reportez-vous à ce qui suit liens :

• [Polices CSS d'origine croisée dans Firefox](https://developer.mozilla.org/en-US/docs/Glossary/Prefetch#Cross-origin_font_loading)
• [Activer les polices inter-domaines dans Firefox](https://stackoverflow.com/questions/19223013/enable-cross-domain-fonts-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!