IE9 bloque le téléchargement de la police Web d'origine croisée

Question

Cela me rend fou.

Juste tester un site sur IE9 et a découvert que le "live" de version est le rendu d'une police web, je suis en utilisant plus petites que sur le dev de la version.

Voici une sélection de saisies d'écran:

Je suis l'aide de la Police Écureuil @font-face kit. Comme vous pouvez le voir, il est très bien sur Firefox, Chrome et même IE9 lors de l'affichage d'une version locale du site.

La seule différence entre les locaux et les versions live, c'est que la police est en train d'être chargé à partir d'un domaine différent sur le site en direct (j'ai mis en place la croix-domaine de la politique correctement, comme en témoigne le fait qu'il fonctionne sur Firefox et Chrome).

Je ne me souviens pas à quoi il ressemblait dans IE8 (Microsoft, encore une fois, n'est-ce pas la pensée de développeurs et d'avoir installé IE9 sur le dessus de IE8 avec aucune option pour exécuter simultanément)

Le site est à http://enplanner.com donc vous pouvez voir la source.

Toute aide serait grandement appréciée - vous en remercie d'avance.

Edit: j'ai enlevé IE9 et découvert que c'est ressemble exactement la même sur les deux locale et de vivre dans IE8. Il semble IE8 a un supérieur moteur de rendu qui est plus proche de FF/Chrome que IE9. C'est assez déprimant de découverte.

Answer 1

IE9 prend en charge .WOFF; IE8 n'est pas, et prend en charge uniquement .Polices EOT.

Ouvrir la IE9 les Outils de développement F12 et vous voyez les messages suivants:

CSS3117: @font-face failed cross-origin request. Resource access is restricted. 
Neuton-webfont.woff

CSS3117: @font-face failed cross-origin request. Resource access is restricted. 
YanoneKaffeesatz-Regular-webfont.woff

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
Neuton-webfont.ttf

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
YanoneKaffeesatz-Regular-webfont.ttf

L'examen de vos en-têtes HTTP, il est clair que votre accès inter-domaine n'est pas configuré correctement, comme il n'y a pas d' Access-Control-Allow-Origin - tête de réponse sur votre WOFF fichiers. Ils sont également livrés avec le mauvais type MIME (text/plain) bien que ce n'est pas la cause de votre problème. Cependant, l'échec de la carte woff le bon type MIME peut causer des problèmes comme certains serveurs ne va pas servir les fichiers avec "undefined" extensions " et au lieu de retourner un HTTP/404 d'erreur.

Answer 2

OK, voici ce qui a fonctionné. Placez la section suivante dans votre configuration Apache pour l'hôte à partir duquel vous servez les polices:

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

Remplacez "mydomain.com" par votre propre domaine ou par * (mais soyez prudent en utilisant * , cela signifie que tout le monde peut utiliser votre CDN)

Le '| woff' était ce que j'avais oublié. Doh!

Answer 3

Pour IIS Ajouter les lignes ci-dessous .... fonctionne comme un charme

---

 <system.webServer>
          <httpProtocol>
          <customHeaders>
              <add name="Access-Control-Allow-Origin" value="*" />
              <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
              <add name="Access-Control-Allow-Headers" value="Content-Type" />
          </customHeaders>
      </httpProtocol>
  </system.webServer>
 

Answer 4

En ce qui concerne la réponse de meanstreakuk ci-dessus, je voudrais compléter. Nous avons eu le même problème et nous avons cherché à savoir ce que Google Web Font faisait. Donc, nous mettons dans notre htaccess, ceci:

Ensemble d'en-têtes Access-Control-Allow-Origin "*"

au lieu de notre domaine. Si l'astérisque, comme Google, fonctionne tout le temps.

Answer 5

J'ai trouvé une solution de contournement. Ajouté ceci à htaccess.

 BrowserMatch MSIE best-standards-support
Header set X-UA-Compatible IE=8 env=best-standards-support