Problème de rendu de police

Question

J'ai réalisé qu'il y avait des problèmes de rendu des polices dans différents navigateurs/systèmes d'exploitation pour un site sur lequel je travaillais. J'utilise Cantarell de Google Web Fonts, taille 16 px, c'est ce qui compte. Voici une capture d'écran.

Firefox Ubuntu, bon:

Firefox WinXP, bon:

Chrome WinXP, mauvais:

IE WinXP, mauvais:

Je peux assurer que dans une page pleine de texte, le problème se manifeste grandement. Pourquoi ça arrive? Une astuce pour résoudre le problème?

- EDIT:

J'aimerais clarifier le problème: dans Chrome et IE, si vous regardez de près la partie € 500 stats, vous verrez des pixels parasites qui rendent la police vraiment moche.

Answer 1

Avec un texte simple, vous ne pouvez pas garantir un rendu des polices parfait au pixel près. Si vous craignez que le texte ne ressemble à certains utilisateurs en raison du rendu des artefacts, il appartient à l'utilisateur à ce moment-là de réparer son propre système. Bien sûr, étant donné que nous ne pouvons pas compter sur eux pour même savoir comment faire cela, sans parler de la peine de le faire, si vous souhaitez toujours garantir la perfection des pixels, vous devez utiliser un alternative aux polices.

Même l'utilisation de fonctionnalités modernes telles que CSS3 @ font-face et le rendu Canvas ne peut pas résoudre le problème, car elles utilisent toujours différentes bibliothèques de polices sous-jacentes par combinaison système d'exploitation/navigateur.

Vous pouvez créer une page d'aide pour indiquer aux utilisateurs comment modifier leurs paramètres pour les systèmes/paramètres de système d'exploitation les plus courants, mais la plupart des utilisateurs ne s'en soucient pas.

Les seules options viables sont le remplacement de Flash ou la génération d’images côté serveur. Ni l'un ni l'autre n'est très accessible, et le remplacement de Flash n'est pas une solution pour certains navigateurs mobiles. Je vous déconseille ces solutions, bien qu'elles puissent fonctionner si la perfection des pixels est plus importante pour vous que l'accessibilité ou la disponibilité d'un appareil à l'autre.

Personnellement, j’ai l’impression que, à moins que la structure ne soit sérieusement modifiée ou "illisible", ne vous embêtez pas avec des alternatives. Faites-le paraître assez décent pour la plupart de vos utilisateurs. Les autres devront traiter des artefacts et des polices avec alias. et comme ces utilisateurs voient exactement les mêmes problèmes de rendu de police sur tout le reste de leur système, ils ne le remarqueront même pas.

Answer 2

J'ai un indice (un peu). Le mauvais comportement dépend de la méthode utilisée pour lisser les bords des polices d'écran. Si vous souhaitez savoir comment accéder à ce paramètre, voir Comment obtenir ClearType? .

Ce paramètre a une incidence sur tous les aspects du rendu du système d'exploitation, pas seulement dans le navigateur. Les valeurs possibles pour ces paramètres sont:

1. Disabled (les polices sont vraiment affreuses)
2. Standard (meilleur mais toujours pas acceptable)
3. ClearType (semble bon)

Le problème est que ce ne sont pas des paramètres que nous (développeurs Web) pouvons modifier facilement sans intervention de l'utilisateur.

J'ai trouvé n article intéressant expliquer le problème, avec un correctif possible, mais en réalité ce n'est pas très utile car la méthode proposée permet simplement de déterminer si un lissage de police est actif ou non. Si cela pouvait également faire la distinction entre Standard et ClearType, il serait possible d'ajouter des classes CSS dédiées avec des polices de secours en cas de besoin. Mais ce n'est pas le cas.

Une suggestion supplémentaire?