jeudi 14 Juil 2011

Polices différentes dans Firefox 5

CSS

La version 4 de Firefox a été vite oubliée, sans doute pour avoir de plus gros nombres rapidement pour "rattraper" la concurrence: Opera 10, IE 9, Chrome 276...

Vous avez peut-être noté depuis votre passage à Firefox 5 que les polices de votre site ou d'autres sites web s'affichent un peu différemment: plus épaisses, plus espacées ou encore lignes plus hautes, voire carrément une autre police. :-o

Tout ceci vient de l'accélération matérielle, une option qui peut être désactivée dans les Options, onglet Avancé. Si vous êtes un simple internaute, utilisateur de Firefox 5 et que vous voulez retrouver l'ancien affichage, vous pouvez désactiver cette option. Mais si vous êtes créateur de sites Web, il vaut mieux vous habituer à cette nouvelle norme.

~

En utilisant le moteur d'affichage de la carte vidéo, le navigateur utilise plus de possibilités de fontes, il peut rendre du texte de différentes épaisseurs (gras léger, gras, double gras...). Ainsi vous devez faire attention aux "empilements" de gras. Par exemple:

<p style="font-weight:bold">Un peu de texte <strong>important</strong></p>

  • rendait avec l'affichage classique une ligne en texte gras de manière uniforme,
  • rend avec l’accélération matérielle le mot «important» en double épaisseur.

~

La hauteur des lignes peut aussi changer avec le pilote d'affichage DirectText via la carte vidéo. Il vous faudra peut-être spécifier la propriété "line-height" dans votre CSS pour avoir le même rendu dans les différents navigateurs.

~

Mais plus grave, les polices composées de sous-polices peuvent ne pas être trouvées par Firefox 5 de la même manière avec ou sans l'accélération matérielle (je ne sais pas encore si c'est un bug). Par exemple, sans l'accélération matérielle ou dans les autres navigateurs il est nécessaire d'indiquer "Franklin Gothic Medium" pour utiliser cette sous-police, mais avec l'accélération matérielle elle n'est pas trouvée à moins d'indiquer "Franklin Gothic" seulement, l'épaisseur fait l'objet d'un traitement séparé.

Dans le cas où votre CSS utilise des polices avec des indications d'épaisseur ou de style (medium, gras, italique, normal...) il vous faudra sans doute indiquer les deux noms pour que tous les navigateurs la trouve. Par exemple:

font-family: "Franklin Gothic Medium", "Franklin Gothic", Arial, sans-serif;

~

Certains gros sites tels que Yahoo, CNN, MSN ou Fotolia se sont fait surprendre par cette mise à jour de Firefox (qui sera surement imité par les autres bientôt) et ont des soucis de polices qui s'affichent en épaisseur double ou triple car ils ont empilés des balises <strong>. Si vous voulez faire mieux, repasser sur vos sites et vérifiez que vous n'avez pas fait la même erreur! ;-)


café Cet article vous a aidé? 
Offrez-moi un café!
Agrégateur informatique

Laisser un commentaire

Azur Dev