Statut du problème, juin 2014: résolu avec Chrome 37
Enfin, l'équipe Chrome publiera un correctif pour ce problème avec Chrome 37 qui sera rendu public en juillet 2014. Voir un exemple de comparaison de Chrome 35 stable actuel et du dernier Chrome 37 (aperçu du développement précoce) ici:
État du problème, décembre 2013
1.) Il n'y a AUCUNE solution appropriée lorsque les polices de chargement via @import
, <link href=
ou Google webfont.js
. Le problème est que Chrome demande simplement des fichiers .woff à l'API de Google dont le rendu est horrible. Étonnamment, tous les autres types de fichiers de polices affichent un rendu magnifique. Cependant, il existe quelques astuces CSS qui "lisseront" un peu la police rendue, vous trouverez la ou les solutions de contournement plus profondément dans cette réponse.
2.) Il existe une vraie solution pour cela lors de l'auto-hébergement des polices, d'abord publiée par Jaime Fernandez dans une autre réponse sur cette page Stackoverflow, qui résout ce problème en chargeant les polices Web dans un ordre spécial. Je me sentirais mal de simplement copier son excellente réponse, alors jetez un œil là-bas. Il existe également une solution (non éprouvée) qui recommande d'utiliser uniquement les polices TTF / OTF car elles sont désormais prises en charge par presque tous les navigateurs.
3.) L'équipe de développeurs Google Chrome travaille sur ce problème. Comme il y a eu plusieurs changements énormes dans le moteur de rendu, il y a évidemment quelque chose en cours.
J'ai écrit un grand article de blog sur ce problème, n'hésitez pas à jeter un coup d'œil:
Comment réparer le rendu de police laid dans Google Chrome
Exemples reproductibles
Découvrez à quoi ressemble l'exemple de la question initiale aujourd'hui, dans Chrome 29:
EXEMPLE POSITIF:
À gauche: Firefox 23, à droite: Chrome 29
EXEMPLE POSITIF:
En haut: Firefox 23, en bas: Chrome 29
EXEMPLE NÉGATIF: Chrome 30
EXEMPLE NÉGATIF: Chrome 29
Solution
Correction de la capture d'écran ci-dessus avec -webkit-text-stroke:
La première ligne est la valeur par défaut, la seconde a:
-webkit-text-stroke: 0.3px;
La troisième rangée a:
-webkit-text-stroke: 0.6px;
Donc, le moyen de corriger ces polices est simplement de leur donner
-webkit-text-stroke: 0.Xpx;
ou la syntaxe RGBa (par nezroy, trouvée dans les commentaires! Merci!)
-webkit-text-stroke: 1px rgba(0,0,0,0.1)
Il existe également une possibilité obsolète : donnez au texte une (fausse) ombre simple:
text-shadow: #fff 0px 1px 1px;
Solution RGBa (trouvée dans le blog de Jasper Espejo):
text-shadow: 0 0 1px rgba(51,51,51,0.2);
J'ai fait un article de blog à ce sujet:
Si vous souhaitez être mis à jour sur ce problème, jetez un œil à l'article de blog correspondant: Comment réparer le rendu de police laide dans Google Chrome . Je publierai des nouvelles s'il y a des nouvelles à ce sujet.
Ma réponse originale:
Il s'agit d'un gros bogue dans Google Chrome et l'équipe Google Chrome le sait, consultez le rapport de bogue officiel ici . Actuellement, en mai 2013, même 11 mois après le signalement du bogue, il n'est pas résolu. C'est une chose étrange que le seul navigateur qui gâche Google Webfonts soit le propre navigateur de Google Chrome (!). Mais il existe une solution de contournement simple qui résoudra le problème, veuillez voir ci-dessous la solution.
DÉCLARATION DE L'ÉQUIPE DE DÉVELOPPEMENT DE GOOGLE CHROME, MAI 2013
Déclaration officielle dans les commentaires du rapport de bogue:
Notre rendu des polices Windows est activement travaillé. ... Nous espérons avoir quelque chose dans un jalon ou deux avec lequel les développeurs pourront commencer à jouer. La vitesse à laquelle il passe à stable dépend, comme toujours, de la vitesse à laquelle nous pouvons éliminer et brûler toutes les régressions.