Y a-t-il un "lissage de police" dans Google Chrome ?

Question

Je suis en train d'utiliser des polices Google Web et elles sont très bien à de très grandes tailles de police, mais à 18px, elles sont terribles. J'ai lu ici et là qu'il existe des solutions pour le lissage des polices, mais je n'en ai trouvé aucun qui l'explique clairement et les quelques extraits que j'ai trouvés ne fonctionnent pas du tout.

Mon h4 est horrible dans pratiquement tous les navigateurs, mais Chrome est le pire. Dans Chrome, pratiquement toutes mes polices ont l'air terrible.

Quelqu'un pourrait-il me guider dans la bonne direction ? Peut-être connaissez-vous une ressource qui explique cela clairement ? Merci !

CAPTURE D'ÉCRAN D'EXEMPLE #1

Cette capture d'écran montre la page d'accueil de https://www.dartlang.org/ , un langage de programmation créé par Google (nous pouvons donc supposer que ce site web est également créé par Google) et utilise des polices Google Web.

La capture d'écran montre Google Chrome à gauche, Firefox/Internet Explorer à droite.

CAPTURE D'ÉCRAN D'EXEMPLE #2

Cette capture d'écran montre une page d'informations produit sur Adobe.com, utilisant des polices Web fournies par Typekit. Adobe & Typekit sont des professionnels en matière de polices.

La capture d'écran montre Google Chrome à droite, Firefox/Internet Explorer à gauche :

Answer 1

État du problème, juin 2014 : Résolu avec Chrome 37

Finalement, l'équipe de Chrome va publier une correction pour ce problème avec Chrome 37 qui sera publié en juillet 2014. Consultez la comparaison d'exemple entre Chrome 35 actuel et le dernier Chrome 37 (aperçu du début du développement) ici :

État du problème, décembre 2013

1.) Il n'y a aucune solution appropriée lors du chargement des polices via @import, ou `webfont.js` de Google. Le problème est que Chrome demande simplement des fichiers _.woff_ à l'API de Google qui rendent horriblement. Étonnamment, tous les autres types de fichiers de police rendent magnifiquement. Cependant, il existe quelques astuces CSS qui "adouciront" un peu la police rendue, vous trouverez les contournements plus loin dans cette réponse.

`

2.) Il y a une vraie solution à 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 corrige ce problème en chargeant les polices web dans un ordre spécial. Je me sentirais mal de simplement copier sa réponse excellente, alors veuillez regarder là-bas. Il y a aussi 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 de Google Chrome travaille sur ce problème. Comme il y a eu plusieurs énormes changements dans le moteur de rendu, il y a évidemment quelque chose en cours de progression.

J'ai écrit un long article de blog sur ce problème, n'hésitez pas à y jeter un coup d'œil: Comment corriger le rendu de police laid dans Google Chrome

Exemples reproductibles

Voyez comment l'exemple de la question initiale se présente aujourd'hui, dans Chrome 29 :

EXEMPLE POSITIF :

À gauche : Firefox 23, à droite : Chrome 29

EXEMPLE POSITIF :

Haut : Firefox 23, 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 par défaut, la deuxième a :

-webkit-text-stroke: 0.3px;

La troisième ligne a :

-webkit-text-stroke: 0.6px;

Ainsi, la manière 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 ombre (fausse) 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 écrit un article de blog sur ce sujet :

Si vous souhaitez être informé sur ce problème, consultez l'article de blog correspondant : Comment corriger le rendu de police laid dans Google Chrome. Je posterai des nouvelles s'il y en a concernant cela.

Ma réponse originale :

Il s'agit d'un gros bug dans Google Chrome et l'équipe de développement de Google Chrome en est consciente, voir le rapport de bug officiel ici. Actuellement, en mai 2013, même 11 mois après que le bug ait été signalé, il n'est pas résolu. C'est une chose étrange que le seul navigateur qui perturbe Google Webfonts soit le propre navigateur de Google Chrome (!). Mais il existe une solution simple qui corrigera le problème, veuillez voir ci-dessous pour la solution.

DÉCLARATION DE L'ÉQUIPE DE DÉVELOPPEMENT DE GOOGLE CHROME, MAI 2013

Déclaration officielle dans les commentaires du rapport de bug :

Notre rendu de police Windows est activement en cours de travail. ... Nous espérons avoir quelque chose au cours d'un ou deux jalons avec lesquels les développeurs pourront commencer à jouer. La vitesse à laquelle cela arrivera en version stable dépend, comme toujours, de la rapidité avec laquelle nous pouvons dénicher et éliminer toute regression.

`

Answer 2

J'ai eu le même problème, et j'ai trouvé la solution dans ce post de Sam Goddard.

La solution consiste à définir l'appel à la police de caractères deux fois. D'abord comme il est recommandé, pour être utilisé par tous les navigateurs, puis ensuite un appel spécifique seulement pour Chrome avec une requête media spéciale :

@font-face {
  font-family: 'chunk-webfont';
  src: url('../../includes/fonts/chunk-webfont.eot');
  src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
  url('../../includes/fonts/chunk-webfont.woff') format('woff'),
  url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
  url('../../includes/fonts/chunk-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'chunk-webfont';
    src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
  }
}

Avec cette méthode, la police de caractères s'affichera correctement dans tous les navigateurs. Le seul point négatif que j'ai trouvé est que le fichier de police est également téléchargé deux fois.

Vous pouvez trouver une version espagnole de cet article sur ma page

Answer 3

Chrome ne rend pas les polices de caractères comme le fait Firefox ou tout autre navigateur. C'est généralement un problème avec Chrome sous Windows uniquement. Si vous voulez lisser les polices, utilisez la propriété -webkit-font-smoothing sur vos balises h4 comme ceci.

h4 {
    -webkit-font-smoothing: antialiased;
}

Vous pouvez aussi utiliser subpixel-antialiased, cela vous donnera un type de lissage différent (rendant le texte un peu flou/ombré). Cependant, vous aurez besoin d'une version nocturne pour voir les effets. Vous pouvez en savoir plus sur le lissage des polices ici.

Answer 4

D'accord, vous pouvez utiliser ceci simplement

-webkit-text-stroke-width: .7px; 
-webkit-text-stroke-color: #34343b;
-webkit-font-smoothing:antialiased;

Assurez-vous que la couleur de votre texte et la largeur de votre texte-stroke supérieur doivent être identiques et c'est tout.

Answer 5

Je dois dire d'abord que ça ne fonctionnera pas toujours, j'ai testé cela avec la police sans-serif et des polices externes comme open sans

Parfois, lorsque vous utilisez des polices très grandes, essayez d'approcher de font-size:49px ou plus

C'est un texte d'en-tête avec une taille de police de 48px (font-size:48px; dans l'élément qui contient le texte).

Mais, si vous augmentez le 48px à font-size:49px; (et 50px, 60px, 80px, etc...), quelque chose d'intéressant se produit

Le texte devient automatiquement lisse et semble très bon

D'un autre côté...

Si vous cherchez de petites polices, vous pouvez essayer ceci, mais ce n'est pas très efficace.

Au parent du texte, appliquez simplement la propriété CSS suivante: -webkit-backface-visibility: hidden;

Vous pouvez transformer quelque chose comme ceci:

En ceci:

(la police est Kreon)

Remarquez que lorsque vous ne mettez pas cette propriété, -webkit-backface-visibility: visible; est hérité

Mais soyez prudent, cette pratique ne donnera pas toujours de bons résultats, si vous regardez attentivement, Chrome rend juste le texte un peu flou.

Un autre fait intéressant:

-webkit-backface-visibility: hidden; fonctionnera également lorsque vous transformez un texte dans Chrome (avec la propriété -webkit-transform, qui inclut les rotations, les inclinaisons, etc)

Sans -webkit-backface-visibility: hidden;

Avec -webkit-backface-visibility: hidden;

Eh bien, je ne sais pas pourquoi cette pratique fonctionne, mais ça fonctionne pour moi. Désolé pour mon anglais bizarre.