web-dev-qa-db-fra.com

Les polices d'icônes ne se chargent pas dans IE11

Nous utilisons icomoon pour nos polices d'icônes. Elles fonctionnent correctement sous Chrome et Firefox, mais ne s'affichent pas dans IE11 ... Parfois. Cela semble fonctionner lors du premier chargement de page, mais pas lors du chargement de page suivant. Effacer le cache ne semble pas le réinitialiser. Ce problème peut être présent dans d'autres versions IE, pour le moment nous nous concentrons uniquement sur IE11.

Voici notre @ 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 */

Mais voici où ça devient bizarre. En regardant les outils de développement, une requête HTTP pour les polices est en cours d’envoi, mais seulement quelques centaines d’octets sont reçus (probablement les en-têtes).

Network panel

Mais la réponse HTTP indique correctement la longueur du contenu sur plusieurs kilo-octets.

Response headers

L'onglet "Corps de la réponse" indique simplement "Aucune donnée à afficher".

Vous pouvez voir dans la capture d'écran du panneau Réseau que les polices Google ne se comportent pas comme ceci.

En collant l'URL dans la barre d'emplacement, le fichier complet est téléchargé.

cssinternet-explorerinternet-explorer-11webfonts
31
Theron Luhn

A couru dans un problème similaire, et à partir de votre capture d'écran ci-dessus, la réponse a un en-tête Cache-Control de 'no-store'. IE semble avoir des problèmes de mise en cache et de polices.

La suppression des en-têtes "Cache-Control: no-store" et "Pragma: no-cache" nous a permis d'obtenir de nouveau les polices d'icônes.

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

25
timjchin

Après avoir étudié le même problème et examiné diverses solutions mises en ligne, j'ai créé la liste de dépannage suivante, qui couvre la plupart des causes potentielles:

  1. Les téléchargements de polices sont désactivés dans IE, sous Options Internet/Sécurité/Personnaliser le niveau/Activer/désactiver les téléchargements de polices. Ils pourraient être désactivés par votre administrateur réseau, auquel cas vous ne pourriez ni voir ni modifier ce paramètre.
  2. Vos en-têtes HTTP empêchent IE de stocker le fichier de police localement. Pour résoudre ce problème, supprimez tout en-tête Cache-Control: no-store, no-cache ou Pragma: no-cache, ou tout en-tête Expires avec une date dans le passé. De plus, l'en-tête Vary a ses astuces dans IE. Si elle est définie sur autre chose que Accept-Encoding, User-Agent, Host ou Accept-Language, alors IE ne mettra rien en cache, sauf si un en-tête ETAG est également présent (voir this Message de blog MSDN ). 
  3. Vous ne définissez pas les types MIME corrects pour le téléchargement de polices. Par exemple, Jetty 9 définira par défaut Content-Type: text/plain pour les types de police habituels (eot, woff, woff2). Voir cette réponse pour connaître les types de contenu appropriés à utiliser.
  4. Veillez à utiliser display: block ou display: inline-block pour votre élément icon.
  5. Enfin, assurez-vous de consulter le guide de dépannage sur FontAwesome.
5
Andrei Socaciu

J'ai rencontré un problème similaire mais avec des icônes de polices Bootstrap (Glyphicons). Vous pouvez essayer si cela fonctionne: 

(Généralement sous Windows 10), les paramètres IE-11 ont été modifiés afin de ne télécharger aucune police externe et d’utiliser uniquement les polices disponibles dans Windows. Ceci est le comportement par défaut. 

Cependant, nous pouvons modifier ce paramètre dans IE pour lui permettre de télécharger des polices externes. Voici les étapes à suivre dans IE - Allez à: Paramètres >> Options Internet >> Sécurité  enter image description here

Cliquez sur “Internet” (ou sur n'importe quelle zone que vous utilisez peut-être) >> “Personnaliser le niveau…”
Suivant dans les "paramètres de sécurité" - Activer "Téléchargement de polices". Par défaut, il serait désactivé .  enter image description here

Actualiser la page

2
Saurabh R S

J'ai eu un problème similaire et il semble être causé par IE qui avait des difficultés avec certains paramètres display et position en combinaison avec iconfonts.

Cela devrait généralement fonctionner en utilisant:

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

Dans mon cas, le fichier de police .eot était corrompu. J'en avais généré un nouveau (+ nouveaux styles .css) et le problème était résolu. Essayez-le 

PS. Assurez-vous de prendre en charge EOT pour IE sur @ font-face, par exemple:

@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
Paweł Bednarczyk

La syntaxe est correcte, cependant, il peut y avoir un problème avec la manière dont vous avez utilisé le convertisseur utilisé pour convertir les fichiers .tff en .eof. Voir cet article pour plus de détails sur ce sujet en général http://www.iandevlin.com/blog/2009/12/webdev/adventures-with-font-face

En attendant, vous pouvez essayer de tester le problème en utilisant une police hébergée par Google. Je dis cela parce que Google gère la compatibilité entre navigateurs de manière transparente. S'il s'avère que la police Google fonctionne, alors vous savez que la conversion de votre police a un problème et que vous devez en essayer une autre. D'après ce que je comprends/ Font Squirrel est vraiment bon pour générer des polices compatibles avec tous les navigateurs. J'espère que cela aide la chance

1
coderrick

Voici le problème: https://docs.Microsoft.com/en-us/windows/security/threat-protection/block-untrusted-fonts-in-enterprise#Turn_on_and_use_the_Blocking_untrusted_fonts_fonts_feature

En gros, Microsoft nous oblige à utiliser à nouveau des feuilles de Sprite.

0
mryarbles