Question

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

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

！请注意，这个比他们的webfont更新回购！

这是after（顶部）和更新（底部）之前的屏幕截图：

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

这是大胆版本的现场演示：

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

由于我在多个项目（网站和网络应用程序，桌面和响应式）中使用Roboto，我很高兴立即实施它。预览很干净，间距很大，但在测试时，我不得不发现，Windows上的谷歌浏览器（最新的稳定版）在渲染字体的粗体和粗斜体版本方面存在问题。

a和e的内部空间充满了颜色，而我的点似乎与字母的轴合并。

我通过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;
}

其他字体文件似乎渲染正确，而且这个在Mac / Chrome上也是如此，但Win / Chrome在渲染Roboto粗体和Roboto粗线条时出现问题，字体大小介于13px和16px之间，用于a和e以及10px和14px之间为了我。

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

有什么想法吗？

Answer 1

如果你有最新版本（今天是v35），你可以启用DirectWrite，它为我解决了这个问题。只需在地址栏中输入chrome://flags，找到Enable DirectWrite设置，然后点击Enable。

来源：http://www.tekrevue.com/tip/chrome-font-rendering-windows/

Answer 2

安装字体后出现此问题（本例中为Roboto）位于Windows Fonts目录中。我解决了删除文件的问题。

转到“X：\ Windows \ Fonts”，其中X是您安装的驱动器，选择并删除Roboto。

完成。享受它:)）

Answer 3

如果Roboto字体出现扭曲或变窄或出现任何意外情况。因为你有一个版本的字体，在这种情况下Roboto安装在你的PC上。转到控制面板＆gt;字体并删除系统上安装的roboto字体，很开心。但令人惊讶的是，Chrome无法使用Web服务器中的字体并从本地系统中选择。 Edge和IE都使用其应该使用的字体信息作为Web服务器。

Google I / O - Chrome中的Roboto Font（新版本）字体呈现问题（windows）

3 个答案: