Google I/O - Roboto Police (nouvelle version) de la police des problèmes de rendu de Chrome (windows)

Après l'écoute de la dernière Google I/O stream, j'ai été plus heureux que ils ont sorti une nouvelle version/mise à jour pour leur propre police Roboto dans leur guide de style.

• http://www.google.com/design/spec/style/typography.html#

! Notez que celui-ci est plus récent que celui de leurs webfont
repo !

C'est une capture d'écran d'après(en haut) et avant la mise à jour (en bas):

• http://img.konrad-abe.de/stackoverflow/screenshot-roboto-new_01.png

C'est une démonstration en direct de l'audacieux versions:

• http://demo.konrad-abe.de/stackoverflow/roboto-font-preview/

Comme je l'ai utiliser Roboto en plus d'un projet (sites web et applications web, à la fois de bureau et réactive) j'ai été ravi de mettre en œuvre immédiatement. L'aperçu était propre et bien espacés et tout, mais en le testant, j'ai dû savoir, que le Google Chrome (dernière version stable) sur Windows a des problèmes de rendu le gras et gras-italique les versions de la police.

a et e ont de l'espace intérieur rempli avec la couleur et les points semblent fusionner avec l'arbre de la lettre.

Je suis en utilisant toutes les versions via font-face:

/* ROBOTO REGULAR FONT
 * page main font
 * can be used with
 * - thin/100    ( + italic)
 * - regular/400 ( + italic)
 * - bold/700    ( + italic)
 */
/* ROBOTO regular /400 */
@font-face {
    font-family: 'Roboto-Regular';
    src: url('/includes/fonts/roboto-regular.eot');
    src: url('/includes/fonts/roboto-regular.eot?#iefix') format('embedded-opentype'),
    url('/includes/fonts/roboto-regular.woff') format('woff'),
    url('/includes/fonts/roboto-regular.ttf') format('truetype'),
    url('/includes/fonts/roboto-regular.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* ROBOTO regular /400 + italic */
@font-face {
    font-family: 'Roboto-Regular';
    src: url('/includes/fonts/roboto-italic.eot');
    src: url('/includes/fonts/roboto-italic.eot?#iefix') format('embedded-opentype'),
    url('/includes/fonts/roboto-italic.woff') format('woff'),
    url('/includes/fonts/roboto-italic.ttf') format('truetype'),
    url('/includes/fonts/roboto-italic.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: italic;
}
/* ROBOTO bold /700 */
@font-face {
    font-family: 'Roboto-Regular';
    src: url('/includes/fonts/roboto-bold.eot');
    src: url('/includes/fonts/roboto-bold.eot?#iefix') format('embedded-opentype'),
    url('/includes/fonts/roboto-bold.woff') format('woff'),
    url('/includes/fonts/roboto-bold.ttf') format('truetype'),
    url('/includes/fonts/roboto-bold.svg#Roboto-Regular') format('svg');
    font-weight: bold;
    font-style: normal;
}
/* ROBOTO bold /700 + italic */
@font-face {
    font-family: 'Roboto-Regular';
    src: url('/includes/fonts/roboto-bolditalic.eot');
    src: url('/includes/fonts/roboto-bolditalic.eot?#iefix') format('embedded-opentype'),
    url('/includes/fonts/roboto-bolditalic.woff') format('woff'),
    url('/includes/fonts/roboto-bolditalic.ttf') format('truetype'),
    url('/includes/fonts/roboto-bolditalic.svg#Roboto-Regular') format('svg');
    font-weight: bold;
    font-style: italic;
}
/* ROBOTO thin /100 */
@font-face {
    font-family: 'Roboto-Regular';
    src: url('/includes/fonts/roboto-thin.eot');
    src: url('/includes/fonts/roboto-thin.eot?#iefix') format('embedded-opentype'),
    url('/includes/fonts/roboto-thin.woff') format('woff'),
    url('/includes/fonts/roboto-thin.ttf') format('truetype'),
    url('/includes/fonts/roboto-thin.svg#Roboto-Regular') format('svg');
    font-weight: 100;
    font-style: normal;
}
/* ROBOTO thin /100 + italic */
@font-face {
    font-family: 'Roboto-Regular';
    src: url('/includes/fonts/roboto-thinitalic.eot');
    src: url('/includes/fonts/roboto-thinitalic.eot?#iefix') format('embedded-opentype'),
    url('/includes/fonts/roboto-thinitalic.woff') format('woff'),
    url('/includes/fonts/roboto-thinitalic.ttf') format('truetype'),
    url('/includes/fonts/roboto-thinitalic.svg#Roboto-Regular') format('svg');
    font-weight: 100;
    font-style: italic;
}

Les autres fichiers de police semblent rendu correct et de ce fait aussi bien sur Mac/Chrome, mais Gagner/Chrome a des problèmes de rendu Roboto gras et Roboto italic pour les tailles de police entre 13px et 16px pour a et e, et entre 10px et 14px pour les i.

Je "fixe" à l'aide de l' .woff fichiers de l'ancien roboto version audacieuse et italic mais ce n'est guère une solution, je l'appellerais une sale solution de contournement...

Des idées?

OriginalL'auteur All Bits Equal | 2014-07-03