web-dev-qa-db-de.com

Symbol-Schriftarten werden nicht in IE11 geladen

Wir verwenden icomoon für unsere Icon-Schriftarten. Sie funktionieren gut in Chrome und Firefox, werden aber nicht in IE11 angezeigt ... Manchmal. Es scheint beim ersten Laden der Seite zu funktionieren, beim nachfolgenden Laden der Seite jedoch nicht. Das Löschen des Caches scheint ihn nicht zurückzusetzen. Dieses Problem ist möglicherweise in anderen IE -Versionen vorhanden. Im Moment konzentrieren wir uns nur auf IE11.

Hier ist unser @ font-face:

@font-face {
font-family: 'icon';
src:url('fonts/icon.eot?-3q3vo5');
src:url('fonts/icon.eot?#iefix-3q3vo5') format('embedded-opentype'),
    url('fonts/icon.woff?-3q3vo5') format('woff'),
    url('fonts/icon.ttf?-3q3vo5') format('truetype'),
    url('fonts/icon.svg?-3q3vo5#rezku') format('svg');
font-weight: normal;
font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
font-family: 'icon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-alphabet:before {
content: "\e600";
}
/* etc etc etc */

Aber hier wird es komisch. Bei den Entwicklertools wird eine HTTP-Anforderung für die Schriftarten gesendet, es werden jedoch nur einige hundert Byte empfangen (wahrscheinlich nur die Kopfzeilen).

Network panel

Die HTTP-Antwort listet die Länge des Inhalts jedoch korrekt in einigen Kilobyte auf.

Response headers

Die Registerkarte "Antworttext" sagt nur "Keine Daten zum Anzeigen".

Sie sehen im Network Panel-Screenshot, dass sich Google Fonts nicht so verhalten.

Wenn Sie die URL in die Adressleiste einfügen, wird die vollständige Datei heruntergeladen.

31
Theron Luhn

Ein ähnliches Problem ist aufgetreten, und aus Ihrem Screenshot oben hat die Antwort den Cache-Control-Header "no-store". IE scheint Probleme mit Zwischenspeicherung und Schriftarten zu haben.

Das Entfernen sowohl des Cache-Controls: no-store als auch des Headers "Pragma: no-cache" hat dazu geführt, dass Icon-Fonts wieder angezeigt werden.

https://github.com/FortAwesome/Font-Awesome/issues/6454

25
timjchin

Nachdem ich genau dasselbe Problem untersucht und verschiedene online durchgeführte Lösungen durchgegangen war, habe ich die folgende Liste zur Fehlerbehebung erstellt, die die meisten möglichen Ursachen abdeckt:

  1. Schriftart-Downloads sind im Internet Explorer deaktiviert, unter Internetoptionen/Sicherheit/Stufe anpassen/Schriftart-Downloads aktivieren/deaktivieren. Sie werden möglicherweise von Ihrem Netzwerkadministrator deaktiviert. In diesem Fall können Sie diese Einstellung weder sehen noch ändern.
  2. Ihre HTTP-Header verhindern, dass IE die Schriftartdatei lokal speichert. Um dies zu beheben, entfernen Sie alle Cache-Control: no-store, no-cache- oder Pragma: no-cache-Header oder Expires-Header mit einem Datum in der Vergangenheit. Auch der Header Vary hat seine Tricks im IE. Wenn er auf einen anderen Wert als Accept-Encoding, User-Agent, Host oder Accept-Language gesetzt ist, wird IE nichts zwischenspeichern, , es sei denn ein ETAG-Header (siehe this) MSDN-Blogbeitrag ). 
  3. Sie legen nicht die richtigen MIME-Typen für das Herunterladen von Schriftarten fest. Beispielsweise wird Jetty 9 standardmäßig Content-Type: text/plain für die üblichen Schriftarttypen (eot, woff, woff2) festgelegt. Siehe diese Antwort für die richtigen zu verwendenden Inhaltstypen.
  4. Stellen Sie sicher, dass Sie für Ihr Symbolelement display: block oder display: inline-block verwenden.
  5. Stellen Sie abschließend sicher, dass Sie die Anleitung zur Fehlerbehebung bei FontAwesome durchgehen.
5
Andrei Socaciu

Ich hatte ein ähnliches Problem, aber mit Bootstrap-Zeichensymbolen (Glyphicons). Sie können versuchen, ob dies funktioniert: 

(In der Regel unter Windows 10) wurden die Einstellungen des IE-11 so geändert, dass keine externen Schriftarten heruntergeladen und nur die in Windows verfügbaren Schriftarten verwendet werden. Dies ist das Standardverhalten. 

Wir können diese Einstellung jedoch in IE ändern, damit externe Schriftarten heruntergeladen werden können. Die folgenden Schritte sind im IE -.__ auszuführen. Gehen Sie zu: Einstellungen >> Internetoptionen >> Sicherheit  enter image description here

Klicken Sie auf "Internet" (oder eine beliebige Zone, die Sie möglicherweise verwenden) >> "Stufe anpassen".
Weiter unter "Sicherheitseinstellungen" - Aktivieren Sie "Schriftart-Download". Standardmäßig wäre es deaktiviert .  enter image description here

Lade die Seite neu

2
Saurabh R S

Ich hatte ein ähnliches Problem und es scheint, dass IE Probleme mit bestimmten display- und position-Einstellungen in Kombination mit iconfonts hat.

Es sollte normalerweise funktionieren mit:

element:before {
     display:block;
     position: absolute;
     ... your styles ...
}
2
tobias47n9e

In meinem Fall war die .eot-Schriftartdatei beschädigt. Ich hatte eine neue generiert (+ neue .css-Stile) und das Problem wurde behoben. Versuch es. 

PS. Stellen Sie sicher, dass Sie EOT für IE unter @ font-face unterstützen, zum Beispiel:

@font-face {
  font-family: "fontName";
  src:url("../../src/theme/fonts/fontName.eot");
  src:url("../../src/theme/fonts/fontName.eot?#iefix") format("embedded-opentype"),
  url("../../src/theme/fonts/fontName.woff") format("woff"),
  url("../../src/theme/fonts/fontName.ttf") format("truetype"),
  url("../../src/theme/fonts/fontName.svg#fontName") format("svg");
  font-weight: normal;
  font-style: normal;
}
1

Die Syntax ist korrekt, es kann jedoch ein Problem mit der Art des Konverters geben, den Sie zum Konvertieren von .tff in .eof verwendet haben. Weitere Informationen zu diesem Thema finden Sie in diesem Artikel im Allgemeinen. Http://www.iandevlin.com/blog/2009/12/webdev/adventures-with-font-face

In der Zwischenzeit können Sie das Problem mithilfe einer von Google-Schriftarten gehosteten Schriftart testen. Ich sage das, weil Google die Cross-Browser-Kompatibilität nahtlos handhabt. Wenn sich herausstellt, dass die Google-Schriftart funktioniert, wissen Sie, dass es ein Problem mit der Art und Weise ist, wie Ihre Schriftart konvertiert wurde, und Sie müssen eine andere versuchen. Soweit ich verstehe, ist Font Squirrel wirklich gut darin, Cross-Browser-kompatible Schriftarten zu erzeugen. Ich hoffe das hilft viel Glück

1
coderrick

Dies ist das Problem: https://docs.Microsoft.com/de-de/windows/security/threat-protection/block-untrusted-fonts-in-enterprise#Turn_on_and_use_the_Blocking_untrusted_fonts_feature

Grundsätzlich verlangt Microsoft, dass wir wieder Sprite-Sheets verwenden müssen.

0
mryarbles