Existe-t-il un «lissage des fonts» dans Google Chrome?

J’utilise google webfonts et ils se débrouillent bien à des tailles de police très grandes, mais à 18px, ils ont l’air affreux. J’ai lu ici et là qu’il existe des solutions pour le lissage des fonts, mais je n’ai trouvé aucune explication claire et les quelques extraits que j’ai trouvés ne fonctionnent pas du tout.

Mon h4 est affreux dans à peu près tous les navigateurs, mais Chrome est le pire. Dans Chrome, à peu près toutes mes fonts sont terribles.

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

EXEMPLE 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 impliquer que ce site est également construit par Google) et utilise les Webfonts de Google.

Capture d’écran montre Google Chrome à gauche, Firefox / Internet Explorer à droite .:

Google Chrome sur la gauche, Firefox / Internet Explorer sur la droite

EXEMPLE D’ECHANTILLON # 2

Cette capture d’écran montre une page d’informations sur le produit sur Adobe.com, à l’aide de fonts Web fournies par Typekit. Adobe et Typekit sont des professionnels en matière de fonts.

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

Google Chrome sur la gauche, Firefox / Internet Explorer sur la droite

    État de la question, juin 2014: correction avec Chrome 37

    Enfin, l’équipe Chrome publiera un correctif pour ce problème avec Chrome 37, qui sera publié en juillet 2014. Voir par exemple la comparaison de l’actuel Chrome 35 stable et de la dernière version de Chrome 37 (aperçu des premiers développements) ici:

    entrer la description de l'image ici

    Etat de la question, décembre 2013

    1.) Il n’ya AUCUNE solution appropriée lors du chargement de fonts via @import , ou webfont.js de Google. Le problème est que Chrome demande simplement des fichiers .woff à partir de l'API de Google, ce qui rend le rendu horrible. Étonnamment, tous les autres types de fichiers de fonts sont parfaits. Cependant, il y a quelques astuces CSS qui vont "lisser" un peu la police rendue, vous trouverez la solution plus profonde dans cette réponse.

    2.) Il existe une véritable solution pour l'auto-hébergement des fonts, d'abord publié par Jaime Fernandez dans une autre réponse sur cette page Stackoverflow, qui corrige ce problème en chargeant des fonts Web dans un ordre spécial. Je me sentirais mal de copier simplement son excellente réponse, alors veuillez y jeter un coup d’œil. Il existe également une solution (non éprouvée) qui recommande d’utiliser uniquement les fonts TTF / OTF car elles sont désormais sockets en charge par la plupart des navigateurs.

    3.) L’équipe de développement de 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 gros article de blog sur cette question, n'hésitez pas à jeter un oeil: Comment réparer le rendu de police laid dans Google Chrome

    Exemples reproductibles

    Voyez comment l’exemple de la question initiale s’affiche aujourd’hui, dans Chrome 29:

    EXEMPLE POSITIF:

    À gauche: Firefox 23, à droite: Chrome 29

    entrer la description de l'image ici

    EXEMPLE POSITIF:

    En haut: Firefox 23, en bas: Chrome 29

    entrer la description de l'image ici

    EXEMPLE NÉGATIF: Chrome 30

    entrer la description de l'image ici

    EXEMPLE NÉGATIF: Chrome 29

    entrer la description de l'image ici

    Solution

    Correction de la capture d'écran ci-dessus avec -webkit-text-stroke:

    entrer la description de l'image ici

    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, la façon de réparer ces fonts 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 : atsortingbuer au texte une simple ombre (fausse):

     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 sur ce blog:

    Si vous souhaitez être mis à jour sur ce problème, consultez l'article correspondant sur le blog: Comment réparer le rendu de police désagréable dans Google Chrome . Je posterai des nouvelles s'il y a des nouvelles à ce sujet.

    Ma réponse originale:

    Ceci est 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 bug, ce n'est pas résolu. C'est une chose étrange que le seul navigateur qui gâche les Webfont Google est le navigateur Chrome de Google (!). Mais il existe une solution de contournement simple qui résoudra le problème, voir ci-dessous pour la solution.

    DÉCLARATION DE GOOGLE CHROME DEVELOPMENT TEAM, MAI 2013

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

    Notre rendu de fonts Windows est activement en cours d'élaboration. ... Nous espérons avoir quelque chose dans un jalon ou deux avec lequel les développeurs peuvent commencer à jouer. Comme toujours, la vitesse à laquelle nous allons à la stabilité dépend de la rapidité avec laquelle nous pouvons extirper et graver les régressions.

    J’ai eu le même problème et j’ai trouvé la solution dans cet article de Sam Goddard ,

    La solution pour définir l’appel à la police deux fois . Tout d’abord, comme il est recommandé, pour être utilisé pour tous les navigateurs et après un appel particulier uniquement pour Chrome avec une requête multimé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'); } } 

    entrer la description de l'image ici

    Avec cette méthode, la police sera bien rendue 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 fonts comme Firefox ou tout autre navigateur. Cela pose généralement un problème dans Chrome uniquement sous Windows. Si vous voulez que les fonts soient lisses, utilisez la propriété -webkit-font-smoothing sur vos tags h4 comme ceci.

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

    Vous pouvez également utiliser le 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 apprendre plus sur le lissage des fonts ici .

    Ok, vous pouvez l’utiliser simplement

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

    Assurez-vous que votre couleur de texte et la largeur de trait du texte supérieure doivent être identiques et c’est tout.

    Je dirai avant tout que cela ne fonctionnera pas toujours , je l’ai testé avec des fonts sans-serif et des fonts externes comme open sans

    Parfois, lorsque vous utilisez des fonts énormes, essayez de vous rapprocher de font-size:49px de la font-size:49px et supérieur

    taille de police: 48px

    C’est 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 montez le 48px à font-size:49px; de la font-size:49px; (et 50px, 60px, 80px, etc …), quelque chose d’intéressant se produit

    taille de police: 49px

    Le texte se lisse automatiquement et semble vraiment bon

    Pour un autre côté …

    Si vous recherchez de petites fonts, vous pouvez essayer cela, mais ce n’est pas très efficace.

    Pour le parent du texte, appliquez simplement la propriété css suivante: -webkit-backface-visibility: hidden;

    Vous pouvez transformer quelque chose comme ceci:

    -webkit-backface-visibility: visible;

    Pour ça:

    -webkit-backface-visibility: hidden;

    (la police est Kreon )

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

    Mais attention , cette pratique ne donnera pas toujours de bons résultats, si vous voyez bien, Chrome ne fait que rendre le texte un peu flou.

    Un autre fait intéressant:

    -webkit-backface-visibility: hidden; will fonctionne aussi lorsque vous transformez un texte dans Chrome (avec la propriété -webkit-transform , qui inclut les rotations, les biais, etc.)

    Sans pour autant

    Sans -webkit-backface-visibility: hidden;

    Avec

    Avec -webkit-backface-visibility: hidden;

    Eh bien, je ne sais pas pourquoi cette pratique fonctionne, mais elle le fait pour moi. Désolé pour mon étrange anglais.