Comment améliorer l'apparence des polices dans Google Chrome?

72

Firefox 4 à gauche, à droite chrome 12.

À gauche, firefox 4, à droite, chrome 12. Existe-t-il un moyen de rendre les polices de rendu du chrome plus jolies?

L'image ci-dessus a été prise sur Windows XP. Ci-dessous, un autre exemple de Windows 7.

entrez la description de l'image ici

hughes
la source
Linux ou Windows?
Nicu Zecheru
Les fenêtres. La capture d'écran ci-dessus a été prise sur Windows XP. Il semble un peu mieux sur ma machine Windows 7, mais certains sites souffrent encore définitivement. Voici un autre exemple: i.imgur.com/zbuUr.png
hughes
1
S'agit-il de polices par défaut du système d'exploitation ou de polices incorporées? (Comme via TypeKit.com)?
rouge
1
Vous savez, c'est une bonne question. C'est surtout visible sur les polices incorporées. Les polices Web sécurisées paraissent bien. Tout sur TypeKit.com semble déchiqueté et horrible.
Hugh
Le rendu de TypeKit est malheureusement très différent selon les combinaisons navigateur / système d'exploitation, tristement. :(
rouge

Réponses:

35

Vérifiez les paramètres ClearType - la capture d'écran de Chrome ressemble à un rendu non-anti-aliasé. Cela tue quasiment toutes les polices Web, car elles ne disposent pas d’indices monochromes (pour des raisons de taille, entre autres). J'avais l'habitude de voir cela signalé comme "IE rend le texte mieux", car il ignore vos paramètres ClearType au niveau du système d'exploitation et l'active par défaut.

Symétrie
la source
Wow, c'était tout le problème. Je suppose que Firefox ignore également les paramètres cleartype. Merci! Profitez de votre prime!
Hugh
6
" il ignore vos paramètres ClearType au niveau du système d'exploitation et " et quoi?
Der Hochstapler
Le tournage de l'accélération GPU a également fonctionné pour moi. Voir lonesysadmin.net/2011/09/12/…
Jimmy Bogard
5
Où irait-on pour vérifier les paramètres ClearType?
Chharvey
1
Cette réponse explique comment procéder sous XP - il n'y a pas de "ClearType" dans Démarrer ou dans le Panneau de configuration. superuser.com/a/441694/46972
ashes999
23

Toutes ces réponses sont fausses! Il s'agit d'un gros problème dans Google Chrome. Veuillez consulter le rapport / rapport de bogue officiel, y compris de nombreuses captures d'écran, ici: Rapport de bogue officiel sur le code Chrome

Actuellement, la meilleure solution consiste simplement à donner à votre élément / titre cette règle simple:

-webkit-text-stroke: 1px

Supplément du Dr John: j'ai trouvé une suggestion qui html { -webkit-text-stroke: 0.25px}fonctionnerait aussi - je l'ai trouvée ici https://groups.google.com/forum/?fromgroups#!topic/mathjax-users/dV_TmJ1QMO4

Sliq
la source
Cela l’améliore davantage. Comment activer ce CSS pour tous les sites par défaut?
ShuaiYuan
@shuaiyuancn Désolé, quoi? Pourquoi voulez-vous dire par "tous les sites"? Cela n'a aucun sens.
Sliq
1
C'est parfaitement logique. Essayez de penser en tant qu'utilisateur final, pas en tant que développeur Web, comme l'indique le bon de commande d'origine. J'ai désactivé l'écriture directe dans chrome: // drapeaux et ajouté une règle globale -webkit-text-strokedans l'addon élégant. Maintenant, Chrome me donne un peu plus de plaisir.
ShuaiYuan
Je suis confus maintenant, je pensais depuis des années que super - utilisateur était synonyme de linux sudo et constituait un portail pour les utilisateurs avancés de linux, et non pour les utilisateurs habituels d’Internet. Hmmm… bizarre.
Sliq
1
Vous avez eu tort pendant des années alors. Vérifiez le slogan: Super utilisateur Pour les passionnés d'informatique et les utilisateurs expérimentés. Je ne pense pas que les utilisateurs ordinaires ajusteraient les polices de cette manière non plus.
ShuaiYuan
16

Chrome lit votre paramètre ClearType qui, par défaut, est désactivé sur Windows XP.

  1. Pour résoudre le problème, fermez d'abord le navigateur Chrome.

  2. Maintenant, cliquez avec le bouton droit n'importe où sur le bureau et sélectionnez "Propriétés" dans le menu déroulant.

  3. Cliquez sur l'onglet "Apparence" situé en haut de la nouvelle fenêtre.

  4. Et cliquez sur le bouton "Effets".

  5. La deuxième option devrait indiquer "Utilisez la méthode suivante pour lisser les bords des polices d'écran".

  6. Sélectionnez l'option "ClearType".

  7. Cliquez sur Appliquer et rouvrez votre navigateur Chrome.

Dorénavant, Chrome rendra vos polices bien anti-aliasées pour obtenir un effet lisse.

Simon Beal
la source
2
Cela a fonctionné pour moi, des options légèrement différentes sur Windows 7 cependant
Gearoid Murphy
2
Cela fonctionne sans redémarrer chrome.
Quazi Irfan
Cela ne fonctionnait pas pour moi sur XP avant de redémarrer Chrome.
ashes999
1
Windows 8: Panneau de configuration> Affichage> Ajuster le texte ClearType> continuer avec l'assistant Suivant Suivant. Redémarrez le navigateur - cela aide.
tour
J'ai également dû redémarrer mon ordinateur pour que mes modifications ClearType soient appliquées dans Windows 10. Excellente solution, BTW!
Simple Sandman
12

Placez le fichier SVG plus haut dans la règle font-face css, par exemple 1er ou deuxième:

@font-face {
font-family: 'gothbook';
src: url('fonts/gothamrnd-book-webfont.eot');
src: url('fonts/gothamrnd-book-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/gothamrnd-book-webfont.svg#GothamRoundedBookRegular') format('svg'),
     url('fonts/gothamrnd-book-webfont.woff') format('woff'),
     url('fonts/gothamrnd-book-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

Au lieu de:

@font-face {
font-family: 'gothbook';
src: url('fonts/gothamrnd-book-webfont.eot');
src: url('fonts/gothamrnd-book-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/gothamrnd-book-webfont.woff') format('woff'),
     url('fonts/gothamrnd-book-webfont.ttf') format('truetype'),
     url('fonts/gothamrnd-book-webfont.svg#GothamRoundedBookRegular') format('svg');
font-weight: normal;
font-style: normal;
}

Des exemples de ce correctif peuvent être vus ici:

Exemples
FontSpring Exemples Adtrak

déterrer
la source
Merci beaucoup!! Sur un projet précédent, j'ai remarqué que la FTO avait l'air vraiment bien aussi, je l'ai essayée sur un autre projet et c'était horrible! SVG a l'air vraiment bien =)
zzz
6

L’accélération GPU est-elle activée dans Google Chrome? Tapez about:flagset recherchez GPU Accelerated Canvas 2D, désactivez-le s'il est activé. Les polices de certains sites semblent très irrégulières lorsque je navigue avec l’accélération activée.

rouge
la source
J'avais l'habitude de l'activer moi-même, mais après la version 10, le rendu des polices a pris un coup. J'espère que Google va régler le problème à un moment donné.
rouge
C'était désactivé. J'ai essayé de l'activer temporairement juste pour voir ce qui se passerait et je n'ai remarqué aucune différence.
Hugh
Bien. Si vous parvenez à trouver ce qui ne va pas, pensez à mettre à jour ici.
rouge
Dans mon cas, la désactivation de l'accélération GPU a corrigé le crénelage.
kcbanner
Travaillé pour moi! Windows 7, Chrome 52
Vincent,
2

Dans Google Chrome, cliquez sur Clé> Options> Sous le capot> [en regard de Contenu Web], puis sur Personnaliser les polices.

Modifiez vos paramètres pour que votre page ressemble à la mienne.Mon écran d'options

Cliquez ensuite sur le x et voyez si votre problème est résolu.

Si cela ne résout pas le problème, il y aura peut-être une dernière chose ... mais j'attendrai que vous essayiez.

Wizlog
la source
Déjà identique: i.imgur.com/zhTBS.png mais vous remarquerez que même en comparant nos captures d'écran, les polices par défaut sont très irrégulières sur ma machine.
Hugh
OK ... qui fait votre carte vidéo?
Wizlog
Aussi ... allez à google.com/webfonts sont-ils tous aussi perturbés? Je sais que vous êtes allé sur typekit.com ... mais c'est peut-être différent. Essayez de regarder à travers les différents filtres et voyez si votre problème s'applique à tous (ex. Est-ce juste un empattement ou ...)
wizlog
3
Cela change les polices de caractères (les "polices"). Cela n'a rien à voir avec le rendu des polices .
Andres Riofrio
2

Chrome ne rend pas bien les polices Web pour le moment. Il y a plusieurs bugs sur leur traqueur de problème pour cela. Merci d'indiquer tout ce qui vous concerne pour leur accorder plus d'attention.

Sam Hasler
la source
2

J'ai eu exactement le même problème, le rendu des polices Web à partir de http://www.google.com/webfonts dans Chrome. J'ai essayé toutes les suggestions sur ceci et quelques autres sites et aucun d'entre eux n'a fonctionné.

Finalement, j'ai commencé à inspecter les propriétés CSS du texte affecté, il s'est avéré que la couleur de la police à l'origine du problème était réelle. Un titre donné color:#454545rendrait mal, mais le même titre donnait ce qui suit: color:#333a bien fonctionné. Remercions Dieu pour les feuilles de style spécifiques aux agents utilisateurs!

ukdesignservices
la source
2

Dans Windows XP, je viens de changer l'option anti-alias de "Par défaut" à "Effacer le type" dans
Affichage → Propriétés → Apparence → VisualEffects.

Berau
la source
2

Chrome prend la valeur clearType du système pour les polices. Regarder mieux dans Windows 7 explique cela. Sur un Mac, l'anti-aliasing est activé pour toutes les polices de taille supérieure à 8, je suppose. Essayez d’ allumer ou de changer le clearType de votre machine Windows

Mise à jour : on dirait que Chrome 22 et les versions supérieures ignorent les paramètres système pourclearType

Om Shankar
la source
1

Ce problème était si grave sous Windows XP SP3 qu'il rendait Chrome inutilisable à toutes fins pratiques. J'ai remarqué que j'avais installé Clear Type Tuning dans le Panneau de configuration et j'ai essayé de décocher "Activer le lissage de police" dans l'onglet Avancé. Après avoir redémarré Chrome. tout allait bien, même après avoir réactivé Font Smoothing. J'ai décidé de cocher la case "Appliquer tous les paramètres aux valeurs par défaut pour les nouveaux utilisateurs et le système".

utilisateur318333
la source
1

Pour moi, ce n'était pas le paramètre ClearType dans Windows 10.1 x64, mais il s'est avéré que c'était un paramètre de mon navigateur Chrome appelé DirectWrite.

  1. Dans votre barre d'adresse, tapez: chrome://flags/#directwrite
  2. Et activez DirectWrite, le titre de ces paramètres indique Désactiver DirectWrite et assurez-vous que le bouton situé en dessous indique le mot: Activer

Cela a résolu le problème pour moi.

Alexscended
la source
0

Il semble que la réponse longue et dure est que vous ne pouvez pas. Il y a beaucoup de discussions et suggestions dans l' aide Chrome , mais je ne vois ne vaut rien suggérer.

La grande question est de savoir comment vous y prenez si mal! J'utilise Chrome pour taper dans cette case ... J'ai même effectué un zoom avant et je ne vois rien comme vous. Si vous avez encore des questions après cela, expliquez votre configuration à la communauté.

mbb
la source
0

Bien que Chrome soit "utilisable" pour les polices, il a l'air mince et délavé là où il rend les lignes diagonales en particulier. IE rend beaucoup mieux, mais IE est un navigateur plus lent et donc FireFox.

Je crois que cela est inhérent au code pour le chrome.

BTW, HackToHell, où puis-je changer la couleur de rendu?

Je vais essayer ça.

DBDooDoo
la source
0

appuyez sur la touche windows + r puis tapez cttune.exe à cet endroit

Une autre méthode consiste à appuyer sur la touche Windows, puis à entrer cleartype, puis à sélectionner Ajuster le texte ClearType.

et suivez les instructions, si vous avez toujours des problèmes, essayez d'autres exemples.

cela a fonctionné pour moi, vous devez essayer les différents exemples, cela ressemble beaucoup à la calibration contraste / luminosité mais au texte à la place

FYI: la désactivation de l'accélération 2d pourrait aider Chrome à jouer avec l'outil d'optimisation windows cleartype

nwgat
la source
0

Si vous souhaitez que les polices Web soient lisibles tout en ayant désactivé le lissage / la suppression des polices, la solution consiste à désactiver les polices Web dans Google Chrome. Dans ce cas, le navigateur utilisera les polices standard du système d’exploitation qui sont rendues correctement lorsque cleartype / smoothing est désactivé. Pour ce faire, passez l' /disable-remote-fontsindicateur à chrome.exe. Cliquez avec le bouton droit sur le raccourci Google Chrome sur le bureau, sélectionnez Propriétés, accédez à l’onglet Raccourci et définissez Cible sur:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" /disable-remote-fonts

Il peut y avoir un problème avec les polices Web en cours de désactivation. Si le site Web utilise des icônes de polices Web, elles ne s'afficheront pas.

Le numéro correspondant dans Chromium tracker:

"Paramètre ClearType à l'échelle du système non respecté pour les polices Web" https://code.google.com/p/chromium/issues/detail?id=319429

Czarek Tomczak
la source
0

Accédez à chrome://flags/(ou about:flags) et désactivez l'option Remplacer la liste de rendu logiciel .

Le canevas 2D accéléré doit également être désactivé.

Cette combinaison m'a aidé.

Andrei Zhytkevich
la source
-1

Allez à chrome: // flags / et réglez "Antialiasing de texte LCD" sur activé. Redémarrez le navigateur.

GregC63
la source