web-dev-qa-db-fra.com

Problème anti-aliasing

J'auditionne des polices sur des polices Web Google et l'une d'elles que je déconseillais était Ubuntu car elle avait l'air un peu irrégulière (capture d'écran ci-dessous prise directement à partir de Google); Cependant, par la suite, j'ai lu un article où il était mentionné comme un bon choix, et il y avait une capture d'écran où elle était vraiment belle (pour moi de toute façon). J'utilise Windows 7 et j'ai essayé de le regarder dans chrome et Firefox. Je remarque la même chose avec d'autres polices, mais celle-ci est un bon exemple, car elle a l'air parfaite dans la capture d'écran, mais pas très bonne quand je la regarde sur leur site. Je sais que c’est essentiellement une question de configuration de mon ordinateur, mais j’ai pensé que c’était le meilleur endroit pour poser la question: y at-il un problème avec les paramètres de ma machine, vu qu’elle ne montre évidemment pas la police identique sur mon ordinateur comme ce fut le cas lorsque l'auteur de l'article l'a téléchargé et l'a utilisé dans une image.


La capture d'écran de Google ...

screenshot from Google

La capture d'écran de l'article ci-dessus ...

screenshot from the article above

3
byronyasgur

J'ai passé de bonnes heures à regarder cela et j'ai pensé partager mes découvertes. Je ne peux pas garantir que ces points sont exacts, mais c'est ainsi que cela me semble. J'apprécierais donc que des corrections/ajouts soient apportés à cela dans les commentaires si quelqu'un pense en savoir plus.

  • La police en question semblait parfaite dans GIMP, donc le problème doit être lié au navigateur.
  • Le problème du navigateur ne semble se produire que de manière notable sur les machines "Windows" (et peut-être "Linux"). Le rendu des polices du navigateur est à la merci du système d'exploitation et OSx semble faire beaucoup mieux que cela.
  • Firefox a fait quelques tentatives pour aider/remplacer "Windows", bien que je pense que ce ne soit peut-être pas aussi bon, même si c'était apparemment une amélioration à l'époque.
  • Aucun navigateur sur "Windows" ne rend les polices aussi bien que GIMP - je présume que PS fait mieux encore
  • Chrome les rend beaucoup mieux que FF - De nombreuses informations sur le Web suggèrent que Chrome est terrible, mais je pense que cela doit faire référence à une version plus ancienne (c'est-à-dire antérieure à 2011) de Chrome ou à quelque chose de ce que j'ai chargé la même police dans les deux navigateurs côte à côte et Chrome est nettement meilleur.
  • IE9 rend mieux que FF mais pas aussi bien que Chrome (versions actuelles)
  • Au-dessous de 49 pixels Le rendu de Chrome n'est pas vraiment impressionnant non plus, c'est au pire dans la plage des 20 à 48 pixels. Un rendu au dessus de 48px est presque parfait
  • Le lissage des polices de Css3 n'a aucun effet sur les machines Windows.
  • Il existe un hack texte-ombre, mais je pense que cela n'a pas non plus d'effet sur les machines Windows, bien que cela puisse avoir quelque chose à voir avec les versions du navigateur.
  • La communauté des concepteurs, qui sont souvent des utilisateurs de Mac, ne semble pas être très consciente du degré d'affichage de certaines polices sur les machines Windows.
  • Certaines polices Web traitent les fenêtres mieux que d’autres, expliquées ci-dessous par Tim Brown , citation tirée de ce site Web

Les instructions TrueType sont un effort coûteux et chronophage qui nécessite des connaissances spécifiques, de la patience ainsi que des aptitudes techniques et esthétiques. Les polices Web comportant des instructions TrueType ont tendance à bien paraître sous Windows; ceux qui n'en ont pas souvent ne le font pas.

Compte tenu de ce qui précède, mon propre plan sera de sélectionner (ou au moins de vérifier) ​​mes polices en utilisant FF sur un ordinateur Windows plutôt que sur Chrome ou sur un Mac. Pour les titres, il semble bien préférable d'aller à> 48px si le design le permet.

1
byronyasgur

J'ai également passé quelques heures là-dessus, et oui, vérifiez vos polices sous Windows Firefox. Sur ma configuration (FF 13, Windows XP), chaque police de Google semble avoir un alias - ce doit être la chose ClearType, mais certaines polices sont bien meilleures que d’autres. Comparez Chau Philomene One à Francois On -

http://clients.idea-bureau.com/font3.gif

et François One a effectivement l’air décent dans les petites tailles.

J'ai trouvé que les polices de Vernon Adams (concepteur de Francois One) semblaient généralement bonnes et que Open Sans était pratiquement parfait. Je suppose qu'ils ont fait tout ce qu'ils devaient faire pour que les polices aient fière allure sous Windows.

2
Natalia
1
Brandt Solovij