Pourquoi mes polices ne se chargent-elles pas dans Firefox lorsque j'utilise @font-face avec des URL absolues provenant d'un domaine externe ?

Comprendre les limitations inter-domaines de @font-face dans Firefox

Question :Pourquoi mes polices ne se chargent-elles pas dans Firefox lorsque j'utilise @font- face avec des URL absolues provenant d'un domaine externe ?

Description du problème :

L'extrait de code fourni utilise @font-face pour définir des polices personnalisées hébergées sur "fwy.pagodabox. com" pour une utilisation dans une boutique Shopify. Cependant, dans Firefox 13.0.1, ces polices ne se chargent pas, ce qui soulève la question de savoir s'il s'agit d'un problème lié à la fonctionnalité de Firefox ou à la syntaxe utilisée dans le CSS.

Réponse :

Firefox impose une restriction sur le chargement de polices à partir de domaines externes via @font-face, sauf si des en-têtes de contrôle d'accès spécifiques sont en place. Lorsque vous hébergez des polices sur un domaine différent, il est crucial de configurer le serveur pour inclure l'en-tête Access-Control-Allow-Origin avec une valeur de * (caractère générique) ou le domaine spécifique à partir duquel les polices sont demandées. Cela permet au navigateur d'accéder aux polices au-delà des limites du domaine.

Pour les serveurs Apache, les directives suivantes peuvent être ajoutées au fichier .htaccess pour permettre le chargement des polices entre domaines :

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

En implémentant ces en-têtes de contrôle d'accès, les polices hébergées sur le serveur pagodabox seront accessibles par la boutique Shopify et les polices se chargeront correctement dans 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!