38 votes

@ font-face fonctionne dans IE8 mais pas dans IE9

Comme décrit ci-dessus, j'ai des problèmes avec @font-face ne s'affichent pas dans IE9 bien qu'il s'affiche bien dans tous les autres navigateur, y compris IE8 et moins. En outre, lors de la visualisation en local sur mon ordinateur, IE9 ne s'affiche pas la police, mais pas quand la vivre pleinement.

Le site est:

bigwavedesign.co.royaume-uni/gcc/gcc/

Le code utilisé est:

    @font-face {
                font-family: 'LeagueGothicRegular';
                src: url('league_gothic_0-webfont.eot');
                src: local('League Gothic Regular'), url('league_gothic_0-webfont.woff') format('woff'), url('league_gothic_0-webfont.ttf') format('truetype'), url('league_gothic_0-webfont.svg#webfonta36nFpyE') format('svg');font-weight: normal;font-style: normal;
}

Toute personne des idées pourquoi cela pourrait se produire?

Cheers!

=============================================

MODIFIER

J'ai trouvé le site suivant qui affiche la même police sur ok dans IE9, anyine aucune idées de comment il a fait?

http://iamthomasbishop.com/

42voto

Tobias Points 526

Pas de réponse, juste une confirmation: j'ai un problème de nature similaire. Police fonctionne dans toutes les autres versions IE sauf IE9, à la fois à l'aide de IETester et navigateur d'origine. Lors du changement de Mode de Document (F12 outils de dev) police fonctionne. Pas la façon dont j'aimerais bien.

Mise à jour: Avec un peu de ruse, j'ai réussi à le faire fonctionner. Semble que IE9 est l'aide de l' .woff version de la police (qui, je l'avait exclu) au cours de la .eot que je le pensais. J'ai utilisé le @font-face generator de fontsquirrel pour obtenir toutes les polices différentes variations et les a inclus dans mon projet, à l'aide de la smileyface-local. De ne pas avoir à modifier mon .fichier htaccess. Maintenant, fonctionne très bien et semble le même dans toutes les versions IE:

@font-face {
  font-family: "LucidaFax-bold";
  src: url("_font/LucidaFax-bold.eot");
  src: local(""),
  url("_font/LucidaFax-bold.woff") format("woff"),
  url("_font/LucidaFax-bold.ttf") format("truetype"),
  url("_font/LucidaFax-bold.svg#LucidaFax-bold") format("svg");
  }

h1 { font-family: "LucidaFax-bold", serif;}

(J'ai même eu mad frais à l'aide de la Marque "Tarquin" Wilton-Jones' text-shadow hack, appliquant le même look pour les versions IE comme le reste du navigateur monde. De la vieille école? Ressemble beaucoup! Était-ce la peine? Eh bien, beaucoup appris. ;)

18voto

Richard Slater Points 2054

J'ai juste eu le même problème avec les Polices Web hébergé sur un IIS7 site, comme suggéré par Grillz la question a été vers le bas à des Types MIME.

J'ai choisi d'utiliser "application/octet-stream" sur la base des réponses pour le type Mime pour WOFF question.

  1. Ouvrez IIS et sélectionnez le site qui héberge les polices de caractères (doit être le même nom de domaine pour IE9 et Firefox)
  2. Double-cliquez sur "Types Mime"
  3. Cliquez sur "Ajouter..." dans le coin en haut à droite.
  4. Dans "extension de nom de Fichier:" entrez ".woff"
  5. Dans "type MIME:" entrez "application/octet-stream"

WOFF MIME Type Screenshot

L'espoir qui sauve quelqu'un de 10 minutes dans le futur.

15voto

Chris Moschini Points 7278

Pour nous, le truc était de changer le format des fichiers .eot que nous servons.

Fonctionne dans IE6-9, Firefox 3-4, Chrome, Safari, Android, iPhone.

 @font-face {
    font-family: 'Museo';
    src: url('/ui/museo300.eot?') format('eot'),
         url('/ui/museo300.ttf')  format('truetype')
}
 

Devient:

 @font-face {
    font-family: 'Museo';
    src: url('/ui/museo300.eot?') format('embedded-opentype'),
         url('/ui/museo300.ttf')  format('truetype')
}
 

3voto

Abalore Points 31

Ma solution est de déclarer deux polices différentes:

 @font-face {
    font-family: "Dereza bold";
    src: local("Dereza bold"), url("../../assets/otf/dereza_bold.otf") format("opentype"); 
}

@font-face {
    font-family: "IE Dereza bold";
    src: url("../../assets/eot/dereza_bold.eot");
}
 

Et alors:

 .divclass {
  font-family: "Dereza bold", "IE Dereza bold";
}
 

3voto

Abalore +1

Ma solution:

 @font-face {
    font-family: "OfficinaSansBookSCC";
    src: url('font/OfficinaSansBookSCC.eot'); 
    src: url('font/OfficinaSansBookSCC.eot') format('embedded-opentype'), 
         url( 'font/OfficinaSansBookSCC.ttf' ) format("truetype");
} 
 

travaillant dans IE 7-9, chrome, opéra, firefox.

première ligne nécessaire pour IE 9, deuxième pour IE 7-8.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X