Internet Explorer n'affiche pas l'icône de police en utilisant @ font-face

J'ai des problèmes pour charger une police correctement dans IE (IE9). Fonctionne bien dans Chrome.Internet Explorer n'affiche pas l'icône de police en utilisant @ font-face

Vous pouvez voir le problème en regardant ce Fiddle. Dans IE9 une boîte est affichée, alors que dans Chrome une étoile est affichée. J'utilise le package FontAwesome trouvé here. Je pense que le problème réside dans la déclaration @ font-face en haut du fichier .css (illustré ci-dessous). Quelqu'un peut-il voir pourquoi IE ne rendrait pas cette police?

@font-face { 
    font-family: 'FontAwesome'; 
    src: url('../font/fontawesome-webfont.eot'); 
    src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), 
    url('../font/fontawesome-webfont.woff') format('woff'), 
    url('../font/fontawesome-webfont.ttf') format('truetype'), 
    url('../font/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'), 
    url('../font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

Source

2012-03-07 John Livermore

Compris le problème. J'avais IE9 en mode de compatibilité. Quand j'ai éteint cela, la police a commencé à apparaître.

Source

2012-03-07 18:16:16

Vous ne pouvez pas imaginer combien de temps a pris pour moi de comprendre la même chose sur un problème identique ... m'a pris comme toute la journée, bonne chance avec votre travail –

Dans le jsFiddle, vous ne définissez pas font-family pour tout élément, vous utilisez italiques (élément i) mais votre @font-face spécifie que la police normale et la jsFiddle ne démontre pas la question parce que @font-face manque (et ne fonctionnerait pas ici, car les URL sont relatives).

En outre, votre jsfiddle essaie de mettre en forme le contenu généré, pas le contenu normal. Le caractère utilisé est un caractère à usage privé (U + F060), et de tels caractères ne sont pas censés être transmis et utilisés, sauf par des accords privés.

Il est préférable d'isoler le problème dans le cas le plus simple possible, afin d'éliminer les effets d'autres problèmes (tels que les problèmes avec le contenu généré).

Source

2012-03-07 05:01:21

Ok. Je pensais que j'avais un cas le plus simple dans le Fiddle. Je suis capable de reproduire cela localement (en dehors de l'environnement Fiddle), mais comme le CSS fait référence aux fichiers de polices, j'ai dû ajouter le paquet FontAwesome en tant que ressource pour le Fiddle. La ressource sur mon serveur est inchangée depuis le téléchargement d'origine à partir du site Web FontAwesome. Je crois que si vous regardez la ressource css référencée, vous verrez la police-famille étant définie. En outre, puisque la police est retirée dans Chrome, je crois que l'URL relative fonctionne. –

Je pense que cela pourrait être un paramètre manquant sur IIS et/ou quel que soit le serveur Web utilisé par jsFiddle. J'ai créé une page d'exemple et l'ai juste chargée du système de fichiers dans les deux navigateurs et cela fonctionne bien. J'ai vérifié les types MIME dans IIS, mais .eot était déjà là et l'addition des autres n'a pas résolu le problème. –

Internet Explorer n'affiche pas l'icône de police en utilisant @ font-face

Répondre

Questions connexes