web-dev-qa-db-fra.com

@ font-face fonctionne dans IE8 mais pas dans IE9

Comme décrit ci-dessus, j'ai des problèmes avec le fait que @ font-face ne s'affiche pas dans IE9 bien qu'il s'affiche correctement dans tous les autres navigateurs, y compris IE8 et les versions antérieures. De plus, lors de l'affichage local sur mon ordinateur, IE9 affiche la police, mais pas lorsqu'il est entièrement actif.

Le site est:

bigwavedesign.co.uk/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;
}

Quelqu'un a une idée pourquoi cela pourrait se produire?

À votre santé!

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

MODIFIER

J'ai trouvé le site suivant qui affiche la même police ok dans IE9, avez-vous des idées sur la façon dont il l'a fait?

http://iamthomasbishop.com/

cssinternet-explorerfont-faceembedded-fonts
38
DanC

Pas de réponse, juste une confirmation: j'ai un problème similaire. La police fonctionne dans toutes les autres versions IE sauf IE9, toutes deux utilisant IETester et le navigateur d'origine. Lorsque vous modifiez le mode Document (outils de développement F12), la police fonctionne. Pas comme je le voudrais bien.

Mise à jour: Avec quelques astuces, j'ai réussi à le faire fonctionner. On dirait que IE9 utilise la version .woff de la police (que j'avais exclue) par rapport au .eot que je pensais. J'ai utilisé le générateur @ font-face from fontsquirrel pour obtenir toutes les variantes de police et les ai incluses dans mon projet, à l'aide du smileyface - local. Je n'ai pas eu à modifier mon fichier .htaccess. Maintenant fonctionne bien et a le même aspect 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;}

(Je me suis même complètement fâché en utilisant le hack de Mark "Tarquin" Wilton-Jones text-shadow, en appliquant le même aspect aux versions IE que le reste du monde des navigateurs. Old school "Ça a l'air génial! Ça en valait la peine? Eh bien, beaucoup appris.};;)

42
Tobias

Je viens tout juste de rencontrer le même problème avec les polices Web hébergées sur un site IIS7, comme suggéré par Grillz le problème revenait aux types MIME.

J'ai choisi d'utiliser "application/octet-stream" en fonction des réponses au type Mime pour la question WOFF .

  1. Ouvrez IIS et sélectionnez le site qui héberge les polices (le même nom de domaine pour IE9 et Firefox).
  2. Double-cliquez sur "Types MIME"
  3. Cliquez sur "Ajouter ..." dans le coin supérieur droit.
  4. Dans "Extension du nom de fichier:" entrez ".woff"
  5. Dans "Type MIME:" entrez "application/octet-stream"

WOFF MIME Type Screenshot

J'espère que cela économisera 10 minutes dans le futur.

18
Richard Slater

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')
}
15
Chris Moschini

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";
}
3
Abalore

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.

3
Дмитрий Погодаев

Dans IE9 - F12, consultez l’écran de mise au point pour voir s’il existe des erreurs CSS3117. Voir aussi: IE9 bloque le téléchargement des polices Web cross-Origin

2
TheKing2

Eh bien, puisque vous avez modifié votre message, le texte ci-dessous ne sera pas la solution. Vous pointez sur le bon répertoire? Est-il possible que ce soit un problème de type mime sur le serveur?

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

C'est peut-être ça:

Il est important de noter que votre site doit générer le rendu dans documentMode 9 afin de tirer parti des nouvelles fonctionnalités incluses dans IE9 (qui inclut toutes les nouvelles fonctionnalités d'IE9, et pas seulement celles liées aux polices Web). Si vous n’avez jamais entendu parler de documentMode, Microsoft a mis au point un guide qui explique ce qu’il en est et comment vous pouvez l’utiliser sur votre site.

de http://blog.typekit.com/2010/09/03/typekit-adds-experimental-support-for-ie9/

2
Gregg B

Font Squirrel fournit également un excellent outil générateur pour vous aider à créer un kit de polices qui comprendra les formats requis, des CSS déjà écrites et même une page de démonstration pour voir comment tout cela est utilisé, ainsi qu'une aide pour résoudre les problèmes éventuels. rencontre. 

Ce fut un jeu d'enfant d'incorporer sa sortie dans mon site et le problème a été résolu parfaitement.

1
sshanky

J'ai eu ce problème. Il s'avère qu'il me manquait une virgule dans la déclaration de famille de polices.

0
user3819978

http://www.fontsquirrel.com utilise ceci pour son exemple de CSS, qui a bien fonctionné pour le projet sur lequel je travaillais.

@font-face {
    font-family: 'QuicksandBook';
    src: url('/Quicksand_Book-webfont.eot');
    src: url('/Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'),
         url('/Quicksand_Book-webfont.woff') format('woff'),
         url('/Quicksand_Book-webfont.ttf') format('truetype'),
         url('/Quicksand_Book-webfont.svg#QuicksandBook') format('svg');
    font-weight: normal;
    font-style: normal;
}
0
Richard Hollis

Vous devriez vérifier this blog post Paul Irish a quelques choses à dire sur les problèmes que vous rencontrez et il présente ce qu’il appelle une déclaration «à toute épreuve» @ font-face.

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

0
Harro

Je voulais ajouter encore une autre chose qui pourrait éventuellement aller mal dans ce scénario. IE9 a une règle qui ignore toutes les déclarations @ font-face qui ne peuvent pas être mises en cache après le premier chargement. En réalité, IE9 utilisera correctement la police sur le premier écran, mais lors des actualisations suivantes, le @ font-face sera désactivé. J'ai découvert cela après avoir fermé mon navigateur par hasard, puis en le rouvrant pour constater que ma police fonctionnait mystérieusement.

Pour résoudre ce problème, vous devez simplement vous assurer que la demande servant votre police a un en-tête de réponse Cache-Control différent de no-cache. Je recommanderais de le régler sur max-age=3600. Cela garantira que votre police est mise en cache pendant une heure. IE9 pourra alors afficher votre police de manière cohérente.

0
JayD3e