Google webfonts rendre agitée en Chrome sur Windows

Mise À Jour Août 2014

Google enfin, résout ce problème en Chrome 37 en natif!!!. Mais pour des raisons historiques, je ne vais pas supprimer cette réponse.

Problème

Le problème est créé parce que chrome n'a en fait pas de rendu des polices TrueType avec un bon anti-aliasing. Toutefois, chrome encore rend les fichiers SVG bien. Si vous vous déplacez à l'appel de votre fichier svg dans votre syntaxe au-dessus de la woff, google chrome télécharger le svg et utiliser à la place du fichier woff. Quelques astuces comme vous, proposer des pistes de travail, mais seulement sur certaines tailles de police.

Mais ce bug est très bien connu pour le Chrome de l'équipe de développeur, et a été dans la fixation de la depuis juillet 2012. Voir l'officiel rapport de bug fil ici: https://code.google.com/p/chromium/issues/detail?id=137692

Mise à jour octobre 2013 (Merci à @Catch22)

Apparemment, certains sites web peuvent expérience intermittent de l'espacement des problèmes lors du rendu de l'svg. Il y a donc un meilleure façon à la peau. Si vous appelez le svg avec une requête de média spécifique à google Chrome, l'espacement, les problèmes disparaissent:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
      font-family: 'MyWebFont';
      src: url('webfont.svg#svgFontName') format('svg');
  }
}

Première approche de la solution:

La Fontspring pare-balles syntaxe modifiée pour servir les svg d'abord:

@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');
}

Pour en savoir plus:

• CSS les propriétés qui affectent le type de rendu
• Plus lisse Web de Rendu des Polices de google Chrome pour Windows
• Comment pare-Balles @font-face des Polices Web

Un correctif a été suggéré ici par l'appel de la .fichier svg, tout d'abord, http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

Réponse par Tom & police-printemps ne l'ai pas fait pour moi, pour une raison quelconque. Ce correctif par Sam Goddard fait si :

Après avoir expérimenté moi-même, je suis tombé sur ce qui semble être un décent, très facile correctif pour ce problème. Il semble que Chrome utilise le .fichier svg dans le @font-face kit, et n'aime pas être appelé en dernier. Ci-dessous est le standard d'appel de @font-face à l'aide de CSS:

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, l' .fichier svg vient en dernier dans la liste des Url. Si nous amender le code de cibler les navigateurs webkit, puis dites-leur d'utiliser uniquement l' .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’);
    }
}

Que je développe dans Firefox. Mon expérience est que FF affiche les polices ttf très bien sans aucune règles supplémentaires (au-delà de la @font-face à l'appel de l'url pour le fichier de police). Chrome, cependant, est une autre histoire. Même avec avec-webkit-font-smoothing: antialiased; règle générale, il affiche toujours une police assez en pointe. Safari ne semblent pas avoir ce problème, donc il n'est pas intrinsèquement Webkit qui ne peut pas rendre une police proprement, c'est un Chrome problème.

Je n'ai pas essayé d'ajouter le -webkit-texte-avc: 0.5 px; la règle, mais.

Des réponses ci-dessus, je l'aime vraiment, Tom Sarduy la réponse de meilleur. Mis à part une bonne description du problème, il donne un grand @font-face de la pile à utiliser pour couvrir tous les principaux navigateurs.

Eu la même chose les gars. Bon dans tous les navigateurs, sauf chrome - même IE10 et 9 étaient très bien. Dreamwaeevr CS6 utilise également une version similaire de fontsprings code, mais a la svg à la fin. Changer ronde pour le SVG avant woff et ttf et tout dans le monde est bon. Tom est bang avec hos exemple, il y a, en fait, passé dans votre code et carte des chemins d'accès aux polices dont vous avez besoin, et vous êtes en affaires!

j'ai essayé de nombreuses façons:
-le chargement du svg avec font-face
-webkit-font-régularisation
...

après

-webkit-transform: rotate(-4.7deg) translate3d( 0, 0, 0);

la rotation était plus lisse, mais le problème principal n'en a pas disparu.

Pour moi la solution était d'ajouter:

-webkit-text-stroke: 0.5px;