Question Comment puis-je améliorer l'apparence de la police dans Google Chrome?


On the left is firefox 4, on the right is chrome 12.

Sur la gauche, il y a Firefox 4, à droite, chrome 12. Existe-t-il un moyen de rendre les polices de rendu chrome plus jolies?

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

enter image description here


71
2017-07-08 14:32


origine


Linux ou Windows? - Nicu Zecheru
Les fenêtres. La capture d'écran ci-dessus a été prise sur Windows XP. Cela semble un peu mieux sur ma machine Windows 7, mais certains sites souffrent encore. Voici un autre exemple: i.imgur.com/zbuUr.png - hughes
Est-ce que ces polices par défaut ou ces polices incorporées? (Par exemple via TypeKit.com)? - red
Vous savez, c'est une bonne question. C'est le plus perceptible sur les polices incorporées. Les polices par défaut Web-safe ont l'air bien. Tout sur TypeKit.com est déchiré et horrible. - hughes
Le rendu de TypeKit est vraiment très différent sur différentes combinaisons de navigateur \ système d'exploitation, malheureusement. :(: - red


Réponses:


Vérifiez les paramètres ClearType - la capture d'écran de Chrome semble être forcée à être non anti-aliasée. Cela va tuer à peu près n'importe quelle police Web, car ils n'ont pas d'indications 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'activer par défaut.


35
2017-07-12 20:40



Wow, c'était le problème entier. Je suppose que Firefox ignore également les paramètres cleartype. Merci! Profitez de votre prime! - hughes
"il ignore vos paramètres ClearType au niveau du système d'exploitation et" et quoi? - Der Hochstapler
Le changement d’accélération du GPU a également fonctionné pour moi. Voir lonesysadmin.net/2011/09/12/... - Jimmy Bogard
Où irait-on pour vérifier les paramètres ClearType? - chharvey
Cette réponse explique comment faire sur XP - il n'y a pas de "ClearType" dans Démarrer ou dans le Panneau de configuration. superuser.com/a/441694/46972 - ashes999


Toutes ces réponses sont fausses! Ceci est un gros bogue dans Google Chrome, s'il vous plaît voir le rapport / fil de bogue officiel, y compris beaucoup de captures d'écran ici: Rapport de bug officiel sur Chrome Code

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

-webkit-text-stroke: 1px

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


23
2018-03-24 01:22



Cela l'améliore encore. 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
C'est parfaitement logique. Essayez de penser en tant qu'utilisateur final, et non développeur Web, comme l'indique le bon de commande original. J'ai désactivé l'écriture directe dans les indicateurs chrome: // et ajouté une règle globale de -webkit-text-stroke dans l'addon élégant. Maintenant, Chrome me donne un peu plus de plaisir. - ShuaiYuan
Je suis confus maintenant, j'ai pensé pendant des années que superutilisateur représente le linux sudo et est un portail pour les utilisateurs avancés de Linux, et non pour les utilisateurs ordinaires d’Internet. Hmmm ... bizarre. - Sliq
Vous vous trompez depuis des années. Vérifiez le slogan: Super User Pour les passionnés d'informatique et les utilisateurs expérimentés. Je ne pense pas non plus que les utilisateurs habituels accordent des polices comme celles-ci. - ShuaiYuan


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

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

  2. Cliquez maintenant avec le bouton droit de la souris 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 se lire comme suit: "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.

À partir de maintenant, Chrome rendra vos polices anti-aliasées pour un effet lisse.


16
2018-06-26 12:00



Cela a fonctionné pour moi, des options légèrement différentes sur Windows 7 si - Gearoid Murphy
Cela fonctionne sans redémarrer chrome. - Quazi Irfan
Cela n'a pas fonctionné pour moi sur XP jusqu'à ce que je redémarre Chrome. - ashes999
Windows 8: Panneau de configuration> Affichage> Ajuster le texte ClearType> continuer avec l'assistant Suivant Suivant. Redémarrer le navigateur - cela aide. - rook
J'ai également dû redémarrer mon ordinateur pour permettre à mes modifications ClearType de s'appliquer dans Windows 10. Solution idéale BTW! - Simple Sandman


Placez le fichier SVG plus haut dans la règle CSS de font-face, par exemple:

@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 cette correction peuvent être vus ici:

Exemples FontSpring
Exemples Adtrak


12
2017-08-06 09:16



Merci beaucoup!! Sur un projet précédent, j'ai remarqué que OTF avait l'air vraiment bien, je l'ai essayé sur un autre projet et ça avait l'air terrible! SVG est vraiment bon =) - zzz


Avez-vous activé l'accélération GPU dans Google Chrome? Type about:flags et chercher GPU Accelerated Canvas 2DDésactivez-le si activé. Les polices sur certains sites apparaissent vraiment irrégulières lorsque j'ai parcouru avec l'accélération activée.


6
2017-07-12 06:23



J'avais l'habitude de l'avoir activé moi-même, mais après la version 10, le rendu des polices a été un succès. J'espère que Google abordera le problème à un moment donné. - red
Il était désactivé J'ai essayé temporairement de lui permettre juste de voir ce qui se passerait, et je n'ai remarqué aucune différence. - hughes
Bien. Si vous réussissez à trouver ce qui ne va pas, n'oubliez pas de mettre à jour ici. - red
Dans mon cas, la désactivation de l'accélération GPU a corrigé l'aliasing. - kcbanner
Travaillé pour moi! Windows 7, Chrome 52 - Vincent


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

Changez vos paramètres pour que votre page ressemble à la mienneMy options screen

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

Si cela ne résout pas le problème, il pourrait y avoir une dernière chose ... mais j'attendrai jusqu'à ce que vous essayiez ceci.


2
2017-07-12 18:56



Déjà identique: i.imgur.com/zhTBS.png cependant, 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. - hughes
OK ... qui fabrique votre carte vidéo? - wizlog
Aussi ... allez à google.com/webfonts est-ce que tout cela est aussi décoiffé? Je sais que vous êtes allé sur typekit.com ... mais cela 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 serif ou ...) - wizlog
Cela change les polices (les "polices"). Cela n'a rien à voir avec la police le rendu. - Andres Riofrio


Chrome ne rend pas bien les polices Web pour le moment. Il y a plusieurs bugs sur leur problème de suivi pour cela. S'il vous plait, marquez-les avec vous pour leur donner plus d'attention.


2
2017-07-19 13:09





J'ai eu exactement le même problème, en rendant des webfonts à partir de http://www.google.com/webfonts dans Chrome. J'ai essayé toutes les suggestions sur ceci et sur 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 c'était la couleur de police réelle à l'origine du problème. Un titre donné color:#454545serait mal rendu, mais le même titre étant donné ce qui suit: color:#333 a bien fonctionné. Merci à Dieu pour les feuilles de style spécifiques aux agents utilisateurs!


2
2018-05-25 12:19





Dans Windows XP, je viens de changer l’option anti-alias de "Default" à "Clear Type" dans
Affichage → Propriétés → Apparence → VisualEffects.


2
2017-11-24 10:09





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

Mettre à jour: Apparemment, Chrome 22 et plus ignorent les paramètres système pour clearType


2
2018-04-18 17:11





J'ai eu ce problème si sévèrement dans Windows XP SP3 qu'il a rendu Chrome inutilisable à toutes fins utiles. J'ai remarqué que j'avais installé Clear Type Tuning dans le panneau de configuration et que j'ai décoché l'option "Activer le lissage des polices" dans l'onglet Avancé. Après avoir redémarré Chrome. c'était ok, 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".


1
2018-04-25 15:46