web-dev-qa-db-fra.com

CSS @ font-face ne fonctionne pas dans ie

J'ai le CSS suivant qui fonctionne dans Firefox mais pas IE. De toute évidence, les polices se trouvent dans le répertoire. Aucune suggestion?

@font-face {
    font-family: "Futura";
    src: url("../fonts/Futura_Medium_BT.eot"); /* IE */
    src: local("Futura"), url( "../fonts/Futura_Medium_BT.ttf" ) format("truetype"); /* non-IE */  
}

body nav {
    font-family: Futura,  Verdana, Arial, sans-serif;
    font-size:1.2em;
    height: 40px;
}
htmlcssxhtmlhtml5css3
30
Shane

J'ai lu beaucoup de tutoriels qui suggéraient des hacks, alors j'ai trouvé cette solution, je pense que c'est mieux ... Cela semble bien fonctionner.

@font-face { 
    font-family: MyFont; src: url('myfont.ttf'); 
}
@font-face{ 
    font-family: MyFont_IE; src: url('myfont.eot'); 
}
.my_font{ 
    font-family: MyFont, MyFont_IE, Arial, Helvetica, sans-serif; 
}
11
JD Isaacks

Si vous rencontrez toujours des problèmes avec ceci, voici votre solution:

http://www.fontsquirrel.com/fontface/generator

Il fonctionne bien mieux/plus rapidement que tout autre générateur de polices et donne également un exemple à utiliser.

10
Aart den Braber

Pour IE> 9, vous pouvez utiliser la solution suivante:

@font-face {
    font-family: OpenSansRegular;
    src: url('OpenSansRegular.ttf'), url('OpenSansRegular.eot');
}
4
UbiQue

De http://readableweb.com/mo-bulletproofer-font-face-css-syntax/

Maintenant que les polices Web sont prises en charge dans Firefox 3.5 et 3.6, Internet Explorer, Safari, Opera 10.5 et Chrome, les auteurs Web sont confrontés à de nouvelles questions: en quoi ces implémentations diffèrent-elles? Quelles techniques CSS s'adapteront à toutes Le développeur de Firefox, John Daggett, a récemment publié un petit tour d'horizon de ces problèmes et des solutions de contournement qui sont explorées. En réponse à ce message, et en réponse, en particulier, au travail de Paul Irish, j'ai trouvé la syntaxe CSS @ font-face suivante Il a été testé dans tous les navigateurs nommés ci-dessus, y compris IE 8, 7 et 6. Jusqu'à présent, tout va bien. Ce qui suit est une page de test qui déclare la police Droid gratuite comme complète famille de polices avec Regular, Italic, Bold et Bold Italic. Voir la source pour les détails. propre site Web et, en plus de l'utilitaire lui-même, le package de téléchargement contient une documentation utile, une police de test et une page de test EOT. Ça s’appelle EOTFAST Si vous travaillez avec @ font-face, c’est un incontournable.

Voici le code du pare-balles Mo:

@font-face{ /* for IE */
    font-family:FishyFont;
    src:url(fishy.eot);
}
@font-face { /* for non-IE */
    font-family:FishyFont;
    src:url(http://:/) format("No-IE-404"),url(fishy.ttf) format("truetype");
}
2
RoToRa

Vous pouvez utiliser Google Font API . Ils disent que cela fonctionne à partir de IE 6 et plus. (Je n'ai pas testé cela.)

L'infrastructure de desserte de Google s'occupe de convertir la police en un format compatible avec tout navigateur moderne (y compris Internet Explorer 6 et plus), ...

1
GvS

L'écureuil de police n'a pas fonctionné pour moi. J'ai téléchargé une police pour la conversion en plusieurs formats de police pour IE support. Il a effectué une version que j'ai pu télécharger. J'ai ensuite téléchargé du contenu sur mon serveur selon les spécifications. Je n'ai pu faire fonctionner Firefox ou IE pour travailler mais pas les deux. La solution qui a fonctionné pour moi était le lien Mo Bullet Proofer ci-dessus.

1
user2442032

Changer comme ci-dessous

@font-face {
    font-family: "Futura";
    src: url("../fonts/Futura_Medium_BT.eot"); /* IE */
    src: local("Futura"), url( "../fonts/Futura_Medium_BT.ttf" ) format("truetype"); /* non-IE */  
}

body nav {
     font-family: "Futura";
    font-size:1.2em;
    height: 40px;
}
0
user7393779

J'ai trouvé si les déclarations de police font partie d'une requête média IE (Edge et 11) ne les chargera pas; elles doivent être la première chose déclarée dans la feuille de style et non enveloppées dans une requête média

0
RichW