web-dev-qa-db-fra.com

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

On the left is firefox 4, on the right is 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.

enter image description here

71
hughes

Vérifiez les paramètres ClearType - la capture d'écran de Google 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.

35
Symmetry

Toutes ces réponses sont fausses! C’est un gros problème dans Google Chrome. Veuillez consulter le rapport de bogue officiel/le fil d’écran comprenant 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 selon laquelle 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

23
Sliq

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.

16
Simon Beal

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

12
digout

L’accélération GPU est-elle activée dans Google Chrome? Tapez about:flags et 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.

6
red

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

2
wizlog

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 allumez ou changez le clearType de votre machine Windows

Update : on dirait que Chrome 22 et les versions supérieures ignorent les paramètres système pour clearType

2
Om Shankar

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.

2
Sam Hasler

J'ai eu exactement le même problème, en rendant Webfonts 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:#454545 rendrait mal, mais le même titre, étant donné ce qui suit: color:#333 fonctionnait bien. Remercions Dieu pour les feuilles de style spécifiques aux agents utilisateurs!

2
ukdesignservices

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.

2
Berau

Ce problème était si grave sous Windows XP SP3 qu'il rendait Chrome inutilisable à toutes fins utiles. 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. 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
user318333

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 en Chrome, tapez: chrome://flags/#directwrite
  2. Et allumez DirectWrite, le titre de ces paramètres dit Désactivez DirectWrite et assurez-vous que le bouton en dessous indique Word: Activer

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

1
Alexscended

Il semble que la réponse longue et dure est que vous ne pouvez pas. Il y a de nombreuses discussions et suggestions dans l'aide de Chrome , mais je ne vois rien qui vaille la peine d'être suggéré.

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é.

0
mbb

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

0
nwgat

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'indicateur /disable-remote-fonts à 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 désactivées. 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 système non respecté pour les polices Web" https://code.google.com/p/chromium/issues/detail?id=319429

0
Czarek Tomczak

Allez à chrome://flags/ (ou about:flags) et Désactivez l'option Remplacer la liste de rendu du logiciel .

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

Cette combinaison m'a aidé.

0
Andrei Zhytkevich

Bien que Chrome soit "utilisable" pour les polices, il a l’air mince et délavé là où il présente des lignes diagonales. 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.

0
DBDooDoo