Existe-t-il un "lissage de police" dans Google Chrome?
J'utilise Google WebFonts et ils conviennent aux super polices de grande taille, mais à 18px, ils ont une apparence affreuse. J'ai lu ici et là qu'il existe des solutions pour le lissage des polices, mais je n'en ai trouvé aucune explication claire et les quelques extraits que j'ai trouvés ne fonctionnent pas du tout.
Mon h4 est affreux dans presque tous les navigateurs, mais Chrome est le pire. Dans Chrome, presque toutes mes polices ont un aspect horrible.
Est-ce que quelqu'un peut-il me montrer la bonne direction? Peut-être connaissez-vous une ressource qui explique cela clairement? Merci!
Exemple d'écran # 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 en déduire que ce site Web est également créé par Google) et utilise Google Webfonts. .
La capture montre Google Chrome à gauche, Firefox/Internet Explorer à droite.:
Exemple d'écran # 2
Cette capture d'écran montre une page d'informations sur le produit sur Adobe.com, à l'aide des polices Web fournies par Typekit. Adobe et Typekit sont des professionnels en matière de polices.
La capture montre Google Chrome à droite, Firefox/Internet Explorer à gauche:
Statut du problème, juin 2014: corrigé avec Chrome 37.
Enfin, l'équipe Chrome publiera un correctif pour ce problème avec Chrome 37, qui sera rendue publique en juillet 2014. Voir l'exemple de comparaison des versions actuelles stables Chrome 35 et les derniers Chrome 37 (aperçu du développement initial) ici:
Statut de l'émission, décembre 2013
1.) Il n'y a PAS la solution appropriée lors du chargement de polices via @import, <link href= ou du webfont.js de Google. . Le problème est que Chrome demande simplement . Woff des fichiers de l'API de Google qui affichent un rendu 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 en profondeur dans cette réponse.
2.) Il IS une vraie solution pour cela en auto-hébergeant les polices, posté pour la première fois par Jaime Fernandez dans une autre réponse sur cette page Stackoverflow, qui résout ce problème en chargeant des polices Web dans un ordre spécial. Je me sentirais mal de simplement copier son excellente réponse, alors jetez-y un coup d'œil. 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éveloppement de Google Chrome travaille sur ce problème. Comme il y a eu plusieurs changements énormes dans le moteur de rendu, quelque chose est en cours de réalisation.
J'ai écrit un article de blog important sur cette question, n'hésitez pas à jeter un coup d'oeil: Comment réparer le rendu moche des polices dans Google Chrome
Exemples reproductibles
Regardez à 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 réparer 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 simple (fausse):
text-shadow: #fff 0px 1px 1px;
Solution RGBa (trouvée sur le blog de Jasper Espejo):
text-shadow: 0 0 1px rgba(51,51,51,0.2);
J'ai fait un post sur ce blog:
Si vous souhaitez être mis à jour sur ce problème, consultez l'article correspondant du blog: Comment réparer le rendu des polices déplaisant dans Google Chrome . Je posterai 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 de Google Chrome est au courant, consultez le rapport de bogue officiel ici . Actuellement, en mai 2013, même 11 mois après que le bug a été signalé, il n'est pas résolu. Il est étrange que le seul navigateur qui gâche Google WebFonts soit le navigateur de Google Chrome (!). Mais il existe une solution simple qui résoudra le problème. Veuillez trouver ci-dessous la solution.
DÉCLARATION DE GOOGLE CHROME ÉQUIPE DE DÉVELOPPEMENT, MAI 2013
Déclaration officielle dans le rapport de bug commente:
Notre rendu de police Windows est en cours de traitement. ... Nous espérons avoir quelque chose dans un jalon ou deux avec lequel les développeurs pourront commencer à jouer. Comme toujours, la rapidité avec laquelle il se stabilise dépend, comme toujours, de la rapidité avec laquelle nous pouvons extirper et détruire 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 if to a défini deux fois l'appel à la police . Tout d'abord, il est recommandé de l'utiliser 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');
}
}
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 un 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 lié à Chrome exécuté sous Windows uniquement. Si vous voulez rendre les polices lisses, utilisez la propriété -webkit-font-smoothing sur vos balises h4 comme celle-ci.
h4 {
-webkit-font-smoothing: antialiased;
}
Vous pouvez également 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 apprendre plus sur le lissage des polices ici .
Ok 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 du trait supérieur du texte doivent être identiques, et c'est tout.
Je dirai avant tout cela cela ne fonctionnera pas toujours, j'ai testé cela avec la police sans-serif et les polices externes telles que open sans
Parfois, lorsque vous utilisez des polices énormes, essayez de vous rapprocher de font-size:49px et supérieur
Il s'agit d'un texte d'en-tête d'une taille de 48px (font-size:48px; dans l'élément contenant le texte).
Mais si vous montez le 48px à font-size:49px; (et 50px, 60px, 80px, etc ...), il se passe quelque chose d'intéressant
Le texte devient automatiquement lisse, et semble vraiment bon
Pour un autre côté ...
Si vous recherchez des polices de petite taille, 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 ça:
Pour ça:
(la police est Kreon)
Considérez que lorsque vous ne mettez pas cette propriété, -webkit-backface-visibility: visible; est inherit
Mais soyez prudent, cette pratique ne donnera pas toujours de bons résultats. Si vous regardez bien, Chrome rendez 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 propriété -webkit-transform, qui inclut les rotations, les inclinaisons, etc.)
Sans -webkit-backface-visibility: hidden;
Avec -webkit-backface-visibility: hidden;
Bien, je ne sais pas pourquoi ça marche, mais ça marche pour moi. Désolé pour mon anglais bizarre.