CSS3 Font-face: Problème de rendu sous Firefox (Windows)

Bonjour à tous,

J'utilise une police spécifique en CSS3 pour un menu et je bloque sur un problème de qualité de rendu sous Firefox.

Elle apparaît nettement plus fine et devient quasiment illisible, alors que sur Chrome, Safari, Opéra, IE9 et Firefox (Mac)* j'ai un rendu parfait.


Testé avec Firefox 3.6.13, 4, 5 et 6.

Pensez-vous qu'il s'agisse du moteur de rendu de Firefox?



*merci à Victor de me l'avoir fait remarquer
Modifié par wbnet (13 Sep 2011 - 18:56)

Salut,

Sous quel système d'exploitation as-tu testé ?

Excellente question, sur Firefox Mac c'est OK (!), sur Firefox Windows c'est KO.

À première vue je dirais un problème dû au lissage des polices (qui ne se fait pas sous Firefox à ma connaissance).

Il faudrait que tu vérifie sous d'ancienne version d'IE voir quel est le rendu. Si c'est similaire tu auras mis le doight sur le bobo

Bonne chance !

J'ai testé avec IE 6-7-8, je n'ai pas de problème! Rageant...

wbnet a écrit :
sur Firefox Windows c'est KO.

Quelle version de Windows ? XP ? Vista ? 7 ?

Seven, je n'ai pas de Vista sous la main...

Bonjour,
J'ai exactement le même souci. Avez-vous trouvé la solution ?
Merci.

Vaxilart a écrit :
À première vue je dirais un problème dû au lissage des polices (qui ne se fait pas sous Firefox à ma connaissance).

...

Le "lissage des polices" est une question complexe qui ne se résume pas à «ça marche / ça marche pas».

Suivant les systèmes d'exploitation et les versions du système et du navigateur, Firefox tente toujours d'appliquer un lissage au polices (de toute manière pour afficher du texte il faut obligatoirement interpréter la fonte, c'est pas comme si par défaut les informations étaient enregistrées sous la forme de pixels!), en exploitant des librairies système et/ou des mécanismes internes. Il arrive parfois qu'un mauvais rendu soit dû à un lissage (ou autres mécanismes, notamment de hinting) trop fort plutôt qu'à une absence de lissage (ou de hinting).

Ici ça ressemble plutôt à du hinting excessif. Ça peut être lié à certaines propriétés ou métadonnées de la fonte qui passent mal dans Firefox. Ça peut être un bug de Firefox, mais aussi un bug de la fonte...

Quelques indications générales:
- Utiliser des fontes qui ont été optimisées et testées pour un affichage à l'écran.
- Éviter d'utiliser en petites tailles (10-14px) des fontes pas ou peu optimisées pour un affichage à l'écran. Les fontes utilisées pour le corps de texte devraient dans tous les cas avoir été dessinées pour le texte de labeur (plutôt que pour le titrage), et optimisées ensuite spécifiquement pour l'affichage sur des écrans en faible résolution (soit à peu près tous les écrans sauf le Retina Display de l'iPhone 4, et les écrans de résolution intermédiaire de certains autres smartphones, à l'heure actuelle).
- @font-face c'est bien pour le titrage, mais pour le labeur et les petits textes d'interface c'est quand même casse-gueule.
Modifié par fvsch (17 Oct 2011 - 10:01)

Personnellement, j'ai résolu ce foutu problème sous Firefox 7 (linux et windoze) et faisant une faute... comme ceci. Je reste plein d'interrogations, mais ça marche:
<style type="text/css"> @font-face {
font-family: 'lafonteenquestion; src: url(http://www.monsite.com/fonts/lafonteenquestion-Regular.ttf);}
@font-face {
font-family: 'lafonteenquestion; font-weight: bold;
src: url(http://www.monsite.com/fonts/lafonteenquestion-Bold.ttf);}
</style>
Pour Explorer, un conditionnel (eot), et pour les autres un simple @fontface normal.

J'avoue que