Les polices Web de Google sont instables dans Chrome sous Windows
J'utilise le service Google Webfonts sur mon site Web et compte beaucoup sur celui-ci. Le rendu est correct sur la plupart des navigateurs, mais il est particulièrement mauvais dans Chrome sous Windows. Très agité et pixelisé.
Ce que j’ai découvert jusqu’à présent, c’est que Chrome exige que la police au format .svg soit chargée en premier. La police que j’utilise, cependant, appelée Asap, n’est disponible qu’en .woff. Je l'ai converti en .svg à l'aide d'un service en ligne gratuit, mais lorsque j'ai ajouté cela à ma feuille de style (avant le .woff), cela n'a rien changé.
J'ai aussi essayé:
-webkit-font-smoothing: antialiased;
text-shadow: 0px 0px 0px;
Espérer que cela aiderait le texte à être rendu plus facilement.
En ce moment, je suis à court d’idées et je n’aimerais pas changer de police. Quelqu'un at-il une idée de la façon dont je peux résoudre ce problème? J'utilise Adobe Browserlab pour tester le rendu, car je ne possède qu'un Mac. Le lien vers le site est: www.symvoli.nl/about
Merci d'avance!
Edit 11 avril 2013:
Chrome 35 Beta semble avoir finalement résolu ce problème:
Mise à jour août 2014
Google a finalement résolu ce problème dans Chrome 37 en mode natif !!!. Mais pour des raisons historiques, je ne supprimerai pas cette réponse.
Problème
Le problème est créé parce que chrome ne peut pas en fait restituer les polices TrueType avec un anti-aliasing correct. Cependant, chrome restitue bien les fichiers SVG. Si vous déplacez l'appel de votre fichier svg dans votre syntaxe au-dessus de la lettre woff, chrome téléchargera le fichier svg et l'utilisera à la place du fichier woff. Certaines astuces que vous proposez fonctionnent bien, mais uniquement sur certaines tailles de police.
Mais ce bogue est très bien connu de l’équipe de développement de Chrome et est en cours de réparation depuis juillet 2012. Consultez le fil officiel du rapport de bogue ici: https://code.google.com/p/chromium/issues/detail? id = 137692
Mise à jour d'octobre 2013 (Merci à @ Catch22)
Apparemment, certains sites Web peuvent rencontrer des problèmes d'espacement intermittent lors du rendu du svg. Il existe donc un meilleur moyen pour le dépouiller. Si vous appelez le svg avec une requête multimédia spécifique à Chrome, les problèmes d'espacement disparaissent:
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'MyWebFont';
src: url('webfont.svg#svgFontName') format('svg');
}
}
Première solution d'approche:
La syntaxe à l'épreuve des balles Fontspring a été modifiée pour servir d'abord le svg:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.svg#svgFontName') format('svg'),
url('webfont.woff') format('woff'),
url('webfont.ttf') format('truetype');
}
Lectures complémentaires:
-webkit-text-stroke: 0.5px;
utilisez-le uniquement sur du texte de grande taille, car cela affectera les performances de votre page.
Un correctif a été suggéré ici en appelant d’abord le fichier .svg, http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
J'ai essayé plusieurs solutions et en ai finalement mis au point une qui fonctionne avec les versions les plus récentes de Chrome qui ne permet pas de changer l'ordre des fichiers:
Essentiellement, j'ai déplacé le fichier TTF dans une section spécifique à Mozilla.
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.svg#svgFontName') format('svg'),
url('webfont.woff') format('woff');
}
@-moz-font-face {
font-family: 'MyWebFont';
src: url('webfont.ttf') format('truetype');
}
Answer by Tom & - font-spring ne l’a pas fait pour une raison quelconque. Ce correctif de Sam Goddard a bien fait:
Après avoir expérimenté moi-même, je suis tombé sur ce qui semble être une solution décente, très facile pour ce problème. Il semble que Chrome utilise le fichier .svg du kit @ font-face et n'aime pas être appelé en dernier. Ci-dessous, l'appel standard pour @ font-face à l'aide de CSS:
// font-face inclusion
@font-face {
font-family: 'font-name';
src: url('path-to-font/font-name.eot');
src: url('path-to-font/font-name.eot?#iefix') format('eot'),
url('path-to-font/font-name.woff') format('woff'),
url('path-to-font/font-name.ttf') format('truetype'),
url('path-to-font/font-name.svg') format('svg');
font-weight: normal;
font-style: normal;
}Comme on peut le voir dans l'exemple, le fichier .svg vient en dernier dans la liste des URL appelées. Si nous modifions le code pour cibler les navigateurs Webkit, indiquez-leur d'utiliser uniquement le fichier .svg.
// Usage
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: ‘font-name';
src: url(‘path-to-font/font-name.svg’) format(‘svg’);
}
}
Cela pourrait simplement être la police que vous utilisez "dès que possible" ne rend pas très bien à certaines tailles. J'ai changé la taille de votre h1 de 3.5em à 50px et ça a l'air un peu mieux. Peut-être pas la solution parfaite mais j'ai remarqué que beaucoup de webfonts de Google peuvent être imprévisibles
Avait la même chose les gars. Bon dans tous les navigateurs sauf chrome - même IE10 et 9 étaient bien. Dreamwaeevr CS6 utilise également une version similaire du code de fontsprings, mais comporte le svg à la fin. Changez-le pour SVG avant woff et ttf et tout va bien dans le monde. Tom y va, par exemple, avec son exemple. En fait, il a été intégré dans votre code et les chemins d'accès aux polices dont vous avez besoin et vous êtes en affaires!
Une autre référence de lien pour le rendu des polices Web en chrome -
http://www.fontspring.com/blog/smoother-web-font-rendering-chrome
Il semble que Google puisse servir différents fichiers woff en fonction du navigateur et du système d'exploitation.
J'ai constaté que si je télécharge la police à partir d'IE, sa taille est environ 10 000 fois plus grande que si elle était faite sur Safari à partir du Mac pour une police particulière. 43k vs 33k. En outre, la version IE semble bien paraître sur le Mac, mais la version Mac ne semble pas bien fonctionner sur le PC. La version Mac ressemble au pire dans Mozilla Firefox sur PC.
Essayez ceci: http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic
SourceSansPro-Regular.woff version PC 27k
SourceSansPro-Regular.woff version Apple 24k
j'ai essayé de nombreuses manières: - en chargeant le svg avec font-face - webkit-font-smoothening ...
après
-webkit-transform: rotate(-4.7deg) translate3d( 0, 0, 0);
la rotation était plus fluide, mais le problème principal n'a pas disparu.
Pour moi, la solution consistait à ajouter:
-webkit-text-stroke: 0.5px;
https://www.gettingthingstech.com/how-to-fix-jagged-font-rendering-in-google-chrome/
Cet article explique un peu les fonctions expérimentales de Google Chromes. Apparemment, l'activation de l'option "DisableWrite" corrige les polices en dents de scie. C’est évidemment une solution par machine fixe et non à pleine échelle.
Je développe dans Firefox. D'après mon expérience, FF affiche très bien les polices ttf sans règles supplémentaires (au-delà de @ font-face qui appelle l'URL du fichier de police). Chrome, cependant, est une histoire différente. Même avec le -webkit-font-lissage: antialiasé; règle il affiche toujours n'importe quelle police assez irrégulièrement. Safari ne semble pas avoir ce problème. Ce n'est donc pas Webkit qui ne peut pas restituer correctement une police, c'est un problème lié à Chrome.
Je n'ai pas essayé d'ajouter le -webkit-text-stroke: 0.5px; règle, mais va.
Parmi les réponses ci-dessus, j'aime beaucoup la réponse de Tom Sarduy. Outre une bonne description du problème, il donne une excellente pile @ font-face à utiliser pour couvrir tous les principaux navigateurs.