28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous

Je développe actuellement un blog sous Wordpress pour le compte d'une amie photographe/designeuse qui, dans l'établissement du design de celui-ci, a opté pour utilisation de la police "Baskerville".

Jusque là, aucun souci : un tour sur FontSquirrel, un code propre obtenu et hop !

Sauf que Firefox ne l'entend pas de cette oreille ! Je vous laisse aller jeter un oeil par vous-même (bug uniquement visible sous Firefox, peu importe la version ou l'OS apparemment) : http://justinemaillard.com/blog/

Pour les non-firefoxiens, je vous ai fait une capture d'écran ici : http://img408.imageshack.us/img408/8144/bugwtf.png

Si quelqu'un a une idée, une solution à proposer... je prends tout, je ne sais plus quoi faire !

Mon code CSS correspondant est le suivant (obtenu, encore une fois, sous FontSquirell donc normalement propre) :

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


Merci d'avance !
Modifié par Lihwem (08 Nov 2011 - 22:11)
Salut Lihwem,

T'es sûr que le souci vient de font-face ? Je serais toi je corrigerais déjà les erreurs du validateur W3C, on dirait que tu as des balises non fermées. Le problème vient peut-être de là.
Modérateur
Bonjour,

Si tu enlèves le font-face et que tu utilises une font commune comme Verdana, est-ce que le problème disparaît?

Tu peux essayer aussi de retirer les propriétés : text-justify:newspaper, pour vérifier si ça vient pas de là, ou d'une combinaison entre le font-face et cette propriété.

Hélas, je n'avais que quelques minutes pour t'aider.

Bon courage!
hchtot a écrit :
Salut Lihwem,

T'es sûr que le souci vient de font-face ? Je serais toi je corrigerais déjà les erreurs du validateur W3C, on dirait que tu as des balises non fermées. Le problème vient peut-être de là.


Salut et merci de ton aide, j'avais complètement zappé le W3C Smiley confused
J'ai pu virer cette balise non fermée (originaire, pour ma défense, d'un article et non de la programmation Smiley langue ) ainsi qu'une paire d'autres trucs qui n'ont toutefois, malheureusement, pas corrigé mon problème. Mais encore une fois, merci de m'avoir rappelé à l'ordre à ce niveau Smiley langue

Tony Monast a écrit :
Bonjour,

Si tu enlèves le font-face et que tu utilises une font commune comme Verdana, est-ce que le problème disparaît?

Tu peux essayer aussi de retirer les propriétés : text-justify:newspaper, pour vérifier si ça vient pas de là, ou d'une combinaison entre le font-face et cette propriété.

Hélas, je n'avais que quelques minutes pour t'aider.

Bon courage!


Hello !

Oui effectivement, avec une font "traditionnelle", ça marche nickel. Du coup j'ai modifié pas à pas le code fourni par Font-Squirrel et il s'est avéré qu'en virant deux url pour la source de la police, à savoir les ".woff" et le ".ttf", ça marche !

Peut-être une incompatibilité de Firefox avec ces types de font ? Allez savoir... toujours est-il que ça y est, c'est nickel !

Merci à vous deux, en espérant que mon problème pourra aider quelqu'un d'autre dans le même cas un jour Smiley smile