La police Web personnalisée ne fonctionne pas dans IE9

Premièrement, les marchandises:

@font-face {
    font-family: 'ludger_duvernayregular';
    src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot');
    src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot?#iefix') format('embedded-opentype'),
         url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.woff') format('woff'),
         url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.ttf') format('truetype'),
         url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.svg#ludger_duvernayregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

p.test {
    font-family: 'ludger_duvernayregular', Arial, serif;
    font-weight: 400;
    color: blue;
}

Note, j'ai utilisé une face de police qui était volontairement facile à voir comme travaillant. ( Et je n'ai pas accès à Gotham dans une police web, donc... Je ne suis même pas sûr que Gotham soit autorisé à utiliser des polices web. Si vous n'avez pas de licence ou si la licence ne l'autorise pas, veuillez la respecter. ) donc vous devrez faire un peu de réflexion sur les chemins vers vos fichiers de police.

ce que j'ai fait est de consulter le Post de blog AlienWebGuy lié à , qui est bon. Il n'est pas long, alors j'aimerais le lire. Il se résume à:

1. peut-être un type MIME mal configuré pour le fichier de police. Voir ci-dessous pour plus d'info. Il y a aussi une note qu'Apache peut avoir ce problème, il semble être plus d'un problème IIS (selon l'article).
2. Vous pouvez tromper (?) IE9 pour utiliser le fichier EOT au lieu du WOFF, qui apparemment fixe la question (selon l'article).

de plus, IE9 a eu un problème d'affichage de la police avec une Démo jsfiddle utilisant le même CSS . Très bizarre. IE7 et 8 fonctionnaient bien, donc je sais que ça marchait d'une certaine façon. Je n'ai pas compris de quoi il s'agissait, mais j'ai sauvegardé le même markup et CSS à un fichier sur mon site et il fonctionne très bien.

Panne...

permettez-moi d'expliquer ce qui se passe dans la CSS ci-dessus. Je vais parcourir chaque ligne. Cependant, gardez à l'esprit que j'ai la police web dans les formats de fichier suivants:

• eot
• woff
• ttf
• svg

vous avez vraiment probablement besoin de eot , ttf et woff si vous ne vous souciez pas de soutenir legacy iOS. SVG traductions sont difficiles à obtenir, cependant.

Maintenant, le nom de votre police de sorte que vous pouvez y faire référence:

font-family: 'ludger_duvernayregular';

IE9 Compat Modes:

src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot');

souvenez-vous de vérifiez que les URL que vous utilisez ici conduisent à un vrai fichier . Mettez-le dans la barre d'adresse et voir ce qui se passe (est-il Télécharger? 404?).

sur ce qui suit, cependant, je vais supprimer L'URL complète de sorte que vous pouvez voir la déclaration entière, y compris la fin.

IE6, 7 et 8:

src: url('http://../ludgerduvernay.eot?#iefix') format('embedded-opentype'),

Note cette partie:

.eot?#iefix <<< See below for an explanation.

"

dans de rares cas, IE échouera parce que le @font-face déclaration a trop de caractères . Ceci peut être résolu dans la plupart des cas par ajouter une marque de hash ’ # ‘après la'?"point d'interrogation . Ce qui vous permet d'acheter un peu de place supplémentaire.

url('http://../ludgerduvernay.woff') format('woff'),

url('http://../ludgerduvernay.ttf') format('truetype'),

url('http://../ludgerduvernay.svg#ludger_duvernayregular') format('svg');

p {
    font-family: 'ludger_duvernayregular', Arial, serif;
}