Texte flou avec Chrome

[poupilou]

Salut à tous,

Le texte de mes pages est légèrement flou avec Chrome et le problème est accentué dès que le texte est mis en gras, c'est pas agréable à regarder et au bout d'un temps ça fait mal aux yeux, comment corriger ce problème avec Chrome ?

Y a-t-il un code particulier à mettre dans mon fichier css pour que la police soit nette avec Chrome : font-family, text-rendering, etc... ?

Merci pour vos conseils.

 

[spout]

URL ? Screenshot ? T'es sur que t'as pas zoomé sans le vouloir ? Ou certaines fontes ont un rendu pas terrible dans certaines font-size...

 

[rick38]

La font utilisée n'a peut-être pas été installée sous sa forme gras, bref sans URL s'adresser à je sais plus qui.

 

[poupilou]

Je ne suis pas le seul dans ce cas là : police flou avec Chrome

Je ne pense que ce soit un problème de réglage/paramétrage interne à Chrome, je n'ai jamais changé un paramètre de ce logiciel, je n'utilise pas ce navigateur.

Il doit y avoir une astuce css ou autre parce que quand je vais sur d'autre sites internet avec Chrome la police est nette sur ces sites : Yahoo, webrankinfo.com, etc...

Voici la première partie de mon fichier css, avec la déclaration des fonts :

@charset "UTF-8";
/* HTML5 DECLARATIONS */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, dialog {display: block;}
audio[controls], canvas, video {display: inline-block; *display: inline; zoom: 1;}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  font-size: 100%;
}
html {font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;}
body {margin:0;padding:0;font-size:0.8em;background:#eeeeee url(../images/bg.png) repeat-y center;font-family:Arial, Helvetica,"Comic Sans MS","Trebuchet MS", Georgia, FreeSans, sans-serif;}
button, input, select, textarea {font-size:0.85em;}
form {margin:0;padding:0;border:none;}

Voyez-vous quelque chose qui ne va pas ?

 

[Koxin-L.fr]

Slt,

Met nous donc un screenshot de la version chrome et ff sinon on ne saura pas vraiment quoi chercher si le problème ne se pose pas chez nous. ;-)

 

[poupilou]

Voici 2 captures d'écran avec Chrome.

Police légèrement flou :

Police nette :

 

[poupilou]

Avec Firefox (c'est net) :

Avec IE (c'est net) :

 

[cthierry]

URL ? (comme demandait Spout d'ailleurs)

 

[poupilou]

Je travail en local pour l'instant, je n'ai pas d'url à fournir pour le moment, désolé.

 

[spout]

Avec la compression jpeg de tes screenshots, tous sont flous.
Peux-tu faire un jsfiddle / codepen alors ?

 

[poupilou]

Je vais mettre en ligne mon site sur mon site d'essai et je posterai le lien ici dès que ce sera fait.

La police de cette image https://www.zupimages.net/up/18/10/rsrk.jpg est moins nette (légèrement flou) pour vous ou pas ? A comparer de celle là https://www.zupimages.net/up/18/10/36jl.jpg ?

Les 2 captures ont été prises avec Chrome : la première image correspond à la police de mon site (telle que je l'a voit avec Chrome sur mon écran : pas très nette) et la deuxième image n'est pas issu de mon site (telle que je l'a voit avec Chrome sur mon écran : un peu mieux nette, non ?)... c'est mes yeux qui déconnent ou si le rendu de la font n'est pas identique pour ces 2 images ?

 

[rick38]

Ni l'une ni l'autre n'est floue, mais une copie d'écran peut ne pas garder le flou.

L'une a un background blanc, l'autre #eeeeee, il faut vérifier la couleur du fond et de la police, une police un peu noire claire sur un fond blanc un peu gris aura l'air moins nette c'est normal.

Sinon je ne sais pas si ça sert à quelque chose mais j'avais pris l'habitude mettre ça dans le css du body (sans doute pour au contraire lisser les polices) :
body{ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

 

[poupilou]

Entendu et merci.

 

[Koxin-L.fr]

Sans pouvoir tester , je pense sur un soucis de navigateur, anti aliasing ou autre.
Essaye de corriger avec la propriété css text-rendering
Ce n'est pas fait pour à l'origine, mais ça peut peeut-être aider.