google-chrome - Google I/O - Chrome (windows) 中的 Roboto Font(新版本)字体渲染问题

Question

在收听了最新的 Google I/O 流之后，我非常高兴他们在样式指南中发布了他们自己的字体 Roboto 的新版本/更新。

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

! Note that this one is newer than the one in their webfont repo !

这是更新后(上)和更新前(下)的屏幕截图:

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

这是粗体版本的现场演示:

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

当我在多个项目(网站和 Web 应用程序，桌面和响应式)中使用 Roboto 时，我很高兴能够立即实现它。预览很干净，间距很好，但在测试期间，我不得不发现，Windows 上的 Google Chrome(最新稳定版)在渲染字体的粗体和粗斜体版本时存在问题。

a's and e's have the inner space filled with color and the i's dots seem to merge with the shaft of the letter.

我通过字体使用所有版本:

/* 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;
}

其他字体文件似乎可以正确渲染，这个在 Mac/Chrome 上也是如此，但 Win/Chrome 在渲染 Roboto 粗体和 Roboto bolditalic 时出现问题，a 和 e 的字体大小在 13px 和 16px 之间，i 的字体大小在 10px 和 14px 之间.

我通过使用旧roboto版本的.woff文件来“修复”它的粗体和粗体，但这几乎不是一个修复，我称之为一个肮脏的解决方法......

有任何想法吗？

Answer 1

如果 Roboto 字体出现扭曲或变窄或任何意外。这是因为在这种情况下，您的 PC 上安装了 Roboto 的字体版本。转到控制面板>字体并删除系统上安装的roboto字体，祝您一切顺利。然而，令人惊讶的是 Chrome 无法使用来自网络服务器的字体并从本地系统中选择。 Edge 和 IE 都使用应该使用的字体信息，即 Web 服务器。