wake-up-neo.net

IE9 blockiert den Download einer Cross-Origin-Webschriftart

Das macht mich verrückt.

Testen Sie einfach eine Website unter IE9 und stellen Sie fest, dass die Live-Version eine von mir verwendete Web-Schriftart kleiner als in der Dev-Version darstellt.

Hier ist eine Auswahl von Bildschirmgreifer: 

enter image description here

Ich verwende das Font Squirrel @ font-face-Kit. Wie Sie sehen können, ist es gut für Firefox, Chrome und sogar IE9, wenn Sie eine lokale Version der Site betrachten.

Der einzige Unterschied zwischen der lokalen Version und der Live-Version besteht darin, dass die Schriftart von einer anderen Domäne auf der Live-Site geladen wird (ich habe die domänenübergreifende Richtlinie korrekt eingerichtet, wie dies unter Firefox und Chrome funktioniert).

Ich kann mich nicht erinnern, wie es in IE8 ausgesehen hat (Microsoft hat noch einmal nicht an Entwickler gedacht und IE9 über IE8 installiert, ohne die Option, sie gleichzeitig auszuführen)

Die Website befindet sich unter http://enplanner.com , sodass Sie die Quelle anzeigen können.

Jede Hilfe dazu wäre sehr dankbar - vielen Dank im Voraus.

Edit: Ich habe IE9 entfernt und festgestellt, dass sowohl auf lokaler als auch auf live-Ebene in IE8 genau das gleiche aussieht. Es scheint, dass IE8 eine überlegene Rendering-Engine hat, die näher an FF/Chrome als IE9 ist. Dies ist eine ziemlich bedrückende Entdeckung.

63
Dan Herd

IE9 unterstützt .WOFF; IE8 unterstützt nicht und unterstützt nur .EOT-Schriftarten.

Öffnen Sie die IE9 F12 Developer Tools, und Sie sehen die folgenden Meldungen:

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

Bei der Überprüfung Ihrer HTTP-Header ist es offensichtlich, dass Ihr domänenübergreifender Zugriff nicht ordnungsgemäß konfiguriert ist, da sich in Ihren WOFF-Dateien kein Access-Control-Allow-Origin-Antwortheader befindet. Sie werden auch mit dem falschen MIME-Typ (text/plain) ausgeliefert, obwohl dies nicht zu Ihrem Problem führt. Fehler beim Zuordnen von woff zum richtigen MIME-Typ kann verursachen, da einige Server keine Dateien mit "undefined" -Erweiterungen bereitstellen und stattdessen einen HTTP/404-Fehler zurückgeben. 

60
EricLaw

OK, hier ist was funktioniert. Platzieren Sie den folgenden Abschnitt in Ihrer Apache-Konfiguration für den Host, von dem aus Sie die Schriftarten bereitstellen:

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

Ersetzen Sie "mydomain.com" entweder durch Ihre eigene Domäne oder durch * (aber seien Sie vorsichtig mit *, da dies bedeutet, dass jeder Ihr CDN verwenden kann)

Das 'woff' hatte ich vergessen. Doh!

34
Dan Herd

Für IIS Fügen Sie die folgenden Zeilen hinzu .... wirkt wie ein Zauber


<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>
8
John

In Bezug auf die Antwort von meanstreakuk oben möchte ich ergänzen. Wir hatten das gleiche Problem und haben gesucht, was Google Web Font tut. Also setzen wir unseren Erfolg ein:

Kopfsatz Access-Control-Allow-Origin "*"
statt unserer Domain . Wenn der Stern wie Google funktioniert, funktioniert er ständig.

7
maufarinelli

Eine alternative Lösung zur Verwendung des Access-Control-Allow-Origin-Headers besteht darin, die Schriftart mithilfe von data: in Ihr CSS einzubetten.

3
Jonathan Aquino

Prüfen Sie, ob Sie in IE die Datei öffnen können (Ihre-web.com/Ihre-font.woff). Wenn Sie den Fehler 404 erhalten, gehen Sie zu IIS, doppelklicken Sie auf die Konfigurationsoption "MIME-Typen", während Sie IIS im linken Bereich ausgewählt, und klicken Sie im Bereich Aktionen auf der rechten Seite auf "Hinzufügen ...". Daraufhin wird der folgende Dialog angezeigt. Fügen Sie die Dateierweiterung .woff hinzu, und geben Sie "application/x-font-woff" als entsprechenden MIME-Typ an.

Ich verwende diese Anweisungen auf dieser Website ( Robòtica educativa ). Ich konvertiere meine ursprüngliche .ttf-Schrift auf ( http://www.font2web.com/ ).

3
Gabri

Ich habe eine Problemumgehung gefunden. Dies wurde zu htaccess hinzugefügt.

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

Vergessen Sie nicht, .svg einzuschließen - dies kann in einigen Fällen erforderlich sein. Durch das Hinzufügen wurde das Problem in IE 11 behoben

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

Es ist auch erwähnenswert, dass Sie, wenn Ihre Assets auf Amazon AWS S3 gehostet werden, die vom Server gesendeten Header nicht festlegen können. Stattdessen müssen Sie die CORS-Einstellungen in Ihrem Bucket wie folgt konfigurieren: 

1
douglasr

Zur Implementierung in ASP.Net können Sie diese Syntax verwenden

Response.AppendHeader("Access-Control-Allow-Origin", "*");
0
Don Rolling

NICHT GETESTET!
Nginx-Site-File-Bit, um nur Origin Zugriff auf Schriftartdateien zu gewähren, wenn Ihr CDN nicht öffentlich ist :-) Viel Spaß beim Codieren

location ~ \.(ttf|otf|eot|woff)$ { 
    Access-Control-Allow-Origin: * 
}
0

Ich habe alles versucht, meine Apache-Konfiguration und .htaccess-Dateien ohne Erfolg zu ändern. In den IE Entwicklungstools stieß ich auf "Document Mode" und der Standard war IE7. Nach einigen Recherchen fand ich dieses Meta-Tag:

<meta http-equiv="X-UA-Compatible" content="IE=9">

Jetzt IE 10 und 9 formatieren meine Website korrekt und zeigen alle Font Awesome-Symbole korrekt an.

Hoffentlich hilft das...

0
prodigerati