28172 sujets

CSS et mise en forme, CSS3

Font-face et IE...

Bonjour,

Je passe ma soirée à essayer de faire fonctionner font-face avec IE... sans avoir d'IE sous la main Smiley decu

Après avoir beaucoup bataillé, j'ai fait un test minimal, qui ne passe pas :
http://ofaurax.free.fr/test/fontface/ff.html

C'est juste un texte qui doit être dans une police spéciale (pas celle par défaut du navigateur).
Le fichier de police est un .eot récupéré sur http://jontangerine.com/silo/typography/font-face/ (et qui fonctionne sur cette page).

Qu'est-ce qui est mauvais dans ma syntaxe ?

Merci d'avance
Je ne comprends pas, il est vrai que ton format est eot (Embedded OpenType), et que celui-ci correspond à celui exigé par IE. Tu as bien vérifié tes chemins et les noms de fichier?

Sinon Vaxilart a raison, dans un souci de compatibilité avec les principaux navigateurs, vas sur fontsquirrel qui convertira ta police en plusieurs fichiers de type différents que tu n'auras qu'à uploader sur ton serveur. Pour le code CSS, aucun problème, il est fourni avec, tu récupères un kit tout fait , prêt à être intégré.

Smiley cligne
Modifié par jmlapam (26 Sep 2011 - 02:05)
Bonjour,
J'ai bien compris qu'il fallait plusieurs formats, mais je n'ai mis que celui pour IE, pour le test minimal.
Parce que j'ai testé tous les autres, ça marche, même IE9, et il n'y a que IE6-IE8 qui ne fonctionnent pas...

Manque de bol pour moi, fontsquirrel est injoignable depuis cet après-midi, au moins....
http://www.downforeveryoneorjustme.com/http://www.fontsquirrel.com/fontface/generator

J'utilise cette syntaxe d'habitude :
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

Il doit me manquer un petit truc que je vois pas.... Smiley decu
Bonjour,

le chemin que tu indiques spécifies que ton fichier .eot est disponible à la racine de ton dossier, au même niveau que ton fichier html.. Est-ce bien le cas..?

De plus, il me semble que dans dans la fontspring syntax ( et ton lien le confirme ) tu dois spécifier "format('embedded-opentype')", ce que je ne vois pas dans ton code source.

Pourrais-tu nous montrer précisément comment ta règle @font-face et comment tu l'utilises ?
Oui je fais Ctrl+U et donc je réitère :
ou est passé ton "format('embedded-opentype')" ?
De plus, sous IE9 ta page fait passer le navigateur en affichage de compatibilité IE9 mode IE7... Même pour un test, une page fonctionnelle semble utile.
La page est valide HTML:
http://validator.w3.org/check?uri=http%3A%2F%2Fofaurax.free.fr%2Ftest%2Ffontface%2Fff.html&charset=%28detect+automatically%29&doctype=Inline&group=0

J'ai testé aussi le CSS, en mode CSS3:
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fofaurax.free.fr%2Ftest%2Ffontface%2Fff.html&profile=css3&usermedium=all&warning=1&vextwarning=&lang=fr

La doc MSDN précise qu'IE6-IE8 ne gère pas le format, et que pour IE9, c'est optionnel.
http://msdn.microsoft.com/en-us/library/ms530757%28v=vs.85%29.aspx
"In Internet Explorer 9 and later versions, the format hint is optional. (format hints are not supported in Internet Explorer 8 and earlier versions and are ignored.)"

J'ai déjà essayé avec cette syntaxe :
@font-face {
	font-family: 'URW Gothic L';
	src: url('fonts/URWGothicL-Demi.eot');
	src: url('fonts/URWGothicL-Demi.eot?#iefix') format('embedded-opentype'),
	     url('fonts/URWGothicL-Demi.woff') format('woff'),
	     url('fonts/URWGothicL-Demi.ttf')  format('truetype');
}


Mais justement, comme ça n'a jamais fonctionné avec IE6-IE8, j'ai créé le test minimal pour trouver une syntaxe qui fontionne....
Avec cette syntaxe, ça marche avec IE9 et tous les autres.

Mais mon problème c'est d'arriver à faire fonctionner au moins avec IE8, qui représente la majorité de mes visiteurs.
Et c'est pour ça que j'ai fait la petite page toute simple.

Merci de ton aide.
font-family: 'URW Gothic L'



Ton problème c'est l'espace en trop, il faut écrire GothicL-Demi et non Gothic L.


EDIT: non, erreur, puisque tu es toujours dans le font-face.

Smiley cligne
Modifié par jmlapam (26 Sep 2011 - 15:07)
Tu veux dire que le font-family doit obligatoirement être le nom du fichier sans l'extension ?
Non, mais en tout cas respecte le même nom quand tu utilises le font face Smiley cligne


essaie



h1{
font-family: 'URW Gothic L';

}



Tu as bien tous tes fichiers dans ton dossier fonts, sur ton serveur?
Modifié par jmlapam (26 Sep 2011 - 15:07)
Il ne te reste qu'à nous montrer un exemple en ligne ou essayer d'encoder ton fichier police différemment.
Heu, ben le test c'est toujours le même depuis le début :
http://ofaurax.free.fr/test/fontface/ff.html
Le but étant de le faire fonctionner avec IE8....

Là, j'ai mis

<style type="text/css">

@font-face
{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.eot');
}

body {
     font-family:'Fontin-Regular';
}
</style>


Donc pas de soucis d'espace, pas de soucis de nom de police différent du nom de fichier... mais ça marche toujours pas.

J'ai pris la police Fontin sur un site où ça fonctionne pour tous les navigateur, y compris IE6 :
http://jontangerine.com/silo/typography/font-face/
On essaie de t'aider avec un problème invraisemblable !
Donc soit ta police est pas bonne, soit tu te plantes dans tes chemins,
maintenant si tu n'es pas content... bye Smiley fache
- soit ta police est pas bonne
Elle a été téléchargée sur un site sur lequel elle fonctionne, et dont le lien a été donné...

- soit tu te plantes dans tes chemins
Tu as juste à regarder la source de mon exemple pour voir que le chemin est bon, ou à suivre le lien webpagetest.org pour voir que leur serveur charge bien la police...

Donc jusqu'à preuve du contraire, ce n'est ni l'un ni l'autre.
Tu prends ta police tu la mets dans le font generator qui remarche (le code CSS est fourni) et tu reviens stp.
Le generator refonctionne pas encore, il mouline dans le vide avec la font.

En testant avec les kits fournit par font squirrel en local (et ça marche), et en relisant le lien où j'ai pris la font Fontin-Regular.eot (qui ne marche pas), je crois que j'ai compris le soucis.

L'outil de chez MS (WETF) qui convertit les polices en EOT demande une URL lors de la conversion, et à mon avis, il doit encoder ça dans la font pour restreindre son utilisation au site en question.

Ça expliquerait pourquoi le fichier Fontin-Regular.eot fonctionne sur le site du type et pas sur le mien, avec le même fichier eot et la même syntaxe CSS.

C'est bien moche, mais avec MS on est jamais déçu....

À noter, l'outil ttf2eot, qui fait correctement le boulot : http://code.google.com/p/ttf2eot/
Sujet clos
Aller à