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


141

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:

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:

google chrome à gauche, firefox / internet explorer à droite


ils me paraissent bien dans Chrome et Firefox ... pourriez-vous ajouter un écran d'impression?
JFK

Aussi sur iPhone / iOS, ils ont l'air très bien.
insérer le nom d'utilisateur ici

Utilisez-vous Windows? Si tel est le cas, le moteur de lissage ClearType du système d'exploitation peut en être la cause. J'ai essayé cette page dans Mac OS, Ubuntu, Fedora et Chrome OS en plus de Windows; ce dernier étant le seul qui ne rend pas correctement, à cause de ce que je soupçonne est le moteur ClearType.
Jules

oui ce sont des fenêtres. Savez-vous ce que je peux y faire?
imakeitpretty

vient de découvrir cette fonctionnalité utile: chrome: // flags / # lcd-text-aa - activez-le et il adoucit le texte pour vous
cinek

Réponses:


162

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:

entrez la description de l'image 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

entrez la description de l'image ici

EXEMPLE POSITIF:

En haut: Firefox 23, en bas: Chrome 29

entrez la description de l'image ici

EXEMPLE NÉGATIF: Chrome 30

entrez la description de l'image ici

EXEMPLE NÉGATIF: Chrome 29

entrez la description de l'image ici

Solution

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

entrez 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, 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.


1
Le problème n'est pas dans tous les navigateurs fonctionnant sous Windows, c'est juste dans le cas de Chrome. Firefox, Opera et IE ont un anti-aliasing approprié des polices. Bien que cela puisse être corrigé dans Chrome à l'aide de -webkit-font-smoothingproperty. Voir ma réponse ci-dessous.
Kushagra

1
Pour le texte noir, j'ai utilisé text-shadow: #333 0px 0px 1px;. Merci beaucoup pour le tuyau.
Yoone

6
Peut-être qu'il s'est perdu dans la traduction, mais -webkit-text-stroke ne fonctionne que lorsque vous utilisez un alpha de la couleur de la police. Donc, pour une police noire, j'utilise quelque chose comme "-webkit-text-stroke: 1px rgba (0,0,0,0.1)".
nezroy

J'ai remarqué que Chrome 30 sur Mac présente maintenant le même manque d'anticrénelage.
jwadsack

1
Dans le ticket officiel sur le tableau de chrome pour ce problème code.google.com/p/chromium/issues/detail?id=137692, il semble viser un correctif pour la v37, si je résout correctement le dernier message du fil de discussion .
Gruber

46

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');
  }
}

entrez la description de l'image ici

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


6
C'est en fait la bonne réponse, mais elle peut être simplifiée. Le simple fait de lister la version SVG en PREMIER dans la liste des polices résout également le problème!
jduncanator

2
Cette réponse donne - de loin - les meilleurs résultats. La police SVG semble x100 meilleure que le hack -webkit-text-stroke. Le principal inconvénient est la taille de la police de la version SVG; il est normalement beaucoup plus gros :-( Google a vraiment besoin de faire ce tri au plus
vite

Je suis tout à fait d'accord ! Je vais créer un lien vers cette réponse à partir de ma réponse.
Sliq

@jduncanator Il n'est pas conseillé de lister d'abord le SVG - cela signifie que la police SVG sera chargée par chaque navigateur qui la prend en charge, alors que vous en avez juste besoin pour Chrome sous Windows.
RoelN

@jduncanator Les deux principaux coupables sont l'absence de prise en charge des indices et la grande taille de fichier (la compression gzip pour les polices n'est pas activée par défaut sur de nombreux serveurs).
RoelN

22

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 .


11
J'ai la dernière version Chrome aujourd'hui 8 février 2013 et cette page ici ne montre aucune différence entre eux maxvoltar.com/sandbox/fontsmoothing
thednp

4
Cela ne fonctionne pas (testé sur Windows). Comme les mac font cela de toute façon, j'ai décidé de dissuader les gens de l'utiliser.
KryptoniteDove

4
Cela ne fonctionne pas. Je viens de l'essayer sur Windows 8. Quelle que soit la dernière version de Chrome (au 08/10/2013).
jay_t55

3
Sur Mac Chrome et Safari, cela fonctionne donc cela vaut la peine d'être ajouté. Apple.com l'utilise même dans sa feuille de style base.css:body { font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; -webkit-font-smoothing: antialiased; }
Justin

1
l'équivalent de Firefox est -moz-osx-font-smoothing: niveaux de gris;
Jeff Walters

14

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.


le lissage des polices ne fait plus rien mais le trait de texte fonctionne et peut aider sur certaines polices. J'ai semblé obtenir les meilleurs résultats avec un trait de 0,5px et un rgba (0,0,0,0,5).
Moss

l'équivalent de Firefox est -moz-osx-font-smoothing: niveaux de gris;
Jeff Walters

c'est bien ... remplacez simplement # 34343b par inherit ..;)
Sagive SEO

9

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

taille de la police: 48px

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

taille de la police: 49px

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:

-webkit-backface-visibilité: visible;

Pour ça:

-webkit-backface-visibilité: caché;

(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

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

Avec

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.