J'utilise google webfonts et elles conviennent à des tailles de police très grandes, mais à 18px, elles ont l'air horrible. J'ai lu ici et là qu'il existe des solutions pour le lissage des polices, mais je n'ai trouvé aucun endroit qui l'explique clairement et les quelques extraits que j'ai trouvés ne fonctionnent pas du tout.

Mon h4apparence est horrible dans à peu près tous les navigateurs, mais Chrome est le pire. Dans Chrome, presque toutes mes polices ont l'air horribles.

Est-ce que quelqu'un peut-il me montrer la bonne direction? Peut-être connaissez-vous une ressource qui explique cela clairement? Merci!

EXEMPLE DE SCREENSHOT # 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 sous-entendre que ce site Web est également créé par Google) et utilise Google Webfonts.

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

EXEMPLE DE SCREENSHOT # 2

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

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

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.

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 deux fois . Tout d'abord comme il est recommandé, à utiliser pour tous les navigateurs, et après un appel particulier uniquement pour Chrome avec une requête média 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 rendra bon 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 dans ma page

Chrome ne rend pas les polices comme Firefox ou tout autre navigateur. Il s'agit généralement d'un problème dans Chrome sous Windows uniquement. Si vous voulez rendre les polices lisses, utilisez la -webkit-font-smoothingpropriété sur vos h4balises comme celle-ci.

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

Vous pouvez également utiliser subpixel-antialiased, cela vous donnera différents types de lissage (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 .

Ok, vous pouvez l'utiliser 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 du trait supérieur du texte doivent être identiques et c'est tout.

Je dirai avant tout que cela ne fonctionnera pas toujours , je l'ai testé avec des sans-serifpolices et des polices externes commeopen sans

Parfois, lorsque vous utilisez les polices énormes, essayez de se rapprocher de font-size:49pxet supérieure

Il s'agit d'un texte d'en-tête d'une taille 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 vraiment bon

Pour un autre côté ...

Si vous recherchez 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:

Pour ça:

(la police est Kreon)

Considérez que lorsque vous ne mettez pas cette propriété, -webkit-backface-visibility: visible;c'est hériter

Mais attention , cette pratique ne donnera pas toujours de bons résultats, si vous voyez attentivement, Chrome rend simplement le texte un peu flou.

Un autre fait intéressant:

-webkit-backface-visibility: hidden;fonctionnera également lorsque vous transformerez un texte dans Chrome (avec la -webkit-transformpropriété, qui inclut les rotations, les biais, etc.)

Sans pour autant -webkit-backface-visibility: hidden;

Avec -webkit-backface-visibility: hidden;

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