18041 sujets

Questions générales et questions de débutants

[@font-face] Qu'est ce qui ne va pas?

Bonjour à toutes et à tous,

j'ai une déclaration @font-face qui passe sous tout les navigateurs mais pas sous IE 11, la voici:

@font-face {
    font-family: 'Roboto-Thin';
    src: url('static/font/Roboto-Thin.eot'); /* IE9 Compat Modes */
    src: url('static/font/Roboto-Bold.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('static/font/Roboto-Thin.woff') format('woff'), /* Modern Browsers */
    url('static/font/Roboto-Thin.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: 'Roboto-Bold';
    src: url('static/font/Roboto-Bold.eot'); /* IE9 Compat Modes */
    src: url('static/font/Roboto-Bold.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('static/font/Roboto-Bold.woff') format('woff'), /* Modern Browsers */
    url('static/font/Roboto-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

Je ne comprends pas ce qui ne va pas, à votre avis? Merci d'avance
Bonjour.

Sans répondre réellement à ta question, je conseille (et de ce que je peux voir peu de gens le fait), quand il y a plusieurs style d'une même police, d'utiliser les font-face de cette façon :
@font-face {
    font-family: 'Roboto';
    src: url('static/font/Roboto-Thin.eot'); /* IE9 Compat Modes */
    src: url('static/font/Roboto-Bold.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('static/font/Roboto-Thin.woff') format('woff'), /* Modern Browsers */
    url('static/font/Roboto-Thin.ttf') format('truetype');
    font-style: normal;
    font-weight: lighter;
}
@font-face {
    font-family: 'Roboto';
    src: url('static/font/Roboto-Bold.eot'); /* IE9 Compat Modes */
    src: url('static/font/Roboto-Bold.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('static/font/Roboto-Bold.woff') format('woff'), /* Modern Browsers */
    url('static/font/Roboto-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: bold;
}

Je trouve cela plus logique...
T'as raison je vais modifier ça, c'est en effet plus cohérent, merci pour ta réponse
Modifié par soldavox (24 Dec 2014 - 10:57)
Bonjour.

Il y a des virgules et non des points-virgules à la fin de certaines lignes de ton code Le problème est peut-être là...
Salut,

thierry a écrit :
Il y a des virgules et non des points-virgules à la fin de certaines lignes de ton code Le problème est peut-être là...

Les virgules sont là pour déclarer des valeurs multiples, comme le permet la propriété src, ainsi que d'autres propriétés en CSS 3. Smiley cligne

Pour revenir à ton problème, soldavox, essaie d'ajouter un ? avant l'ancre #iefix, comme suit :
src: url('static/font/Roboto-Bold.eot?#iefix') format('embedded-opentype')

Et si ça ne résout toujours pas ton problème, essaie de supprimer les commentaires.
Modifié par Victor BRITO (27 Dec 2014 - 02:45)
Salut Victor Brito, merci pour ta réponse. Comme suggéré, j'ai viré les commentaires au passage. Pas de différence pour le moment mais je me demande si le problème ne vient pas de l'interprétation qu'IE fait de la police:
j'ai remarqué dans le débugueur que la police est bien prise en compte mais il ne différencie pas la grasse et la fine est affiche la grasse par défaut.
J'ai essayé, en local, de changer la dénomination de la police mais ça ne fait rien, visiblement c'est IE qui interprète mal le fichier de police. J'ai également tenté de refaire le kit @font-face sur Font Squirrel mais sans résultat...
Sujet clos
Aller à