Google I / O - Chrome中的Roboto字体（新版本）字体呈现问题（Windows） [英] Google I/O - Roboto Font (new version) font rendering issues in Chrome (windows)

问题描述

在听完最新的Google I / O流之后，我很高兴他们发布了自己的字体Roboto的新版本/更新。 >

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

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

这是截屏后（顶部）和更新之前（下）：

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

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

• 
  

当我在一个以上的项目（网站和web应用程序，桌面和响应）中使用Roboto时， 。预览很干净，间隔很大，除了测试之外，我必须知道，Windows上的Google Chrome（最新稳定版）在呈现粗体和粗体斜体版本的字体时遇到问题。

a和e的内部空间充满了颜色，我的点似乎与信件的竖井合并。

我通过font-face使用所有版本：

  / * ROBOTO常规字体
 *页面主字体
 *可以与
 *  -  thin / 100（+ italic）
 *  -  regular / 400（+ italic）
 * - 粗体/ 700（+斜体）
 * / 
 / * 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 ''）格式（'woff'），
 url（'/ includes / fonts / roboto-regular.ttf'）格式（'truetype'），
 url（'/ includes / fonts / roboto-regular .svg＃Roboto-Regular'）格式（'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 ''）格式（'woff'），
 url（'/ includes / fonts / roboto-italic.ttf'）格式（'truetype'），
 url（'/ includes / fonts / roboto-italic .svg＃Roboto-Regular'）格式（'svg'）; 
 font-weight：normal; 
 font-style：italic; 
} 
 / * ROBOTO粗体/ 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 ''）格式（'woff'），
 url（'/ includes / fonts / roboto-bold.ttf'）格式（'truetype'），
 url（'/ includes / fonts / roboto-bold .svg＃Roboto-Regular'）格式（'svg'）; 
 font-weight：bold; 
 font-style：normal; 
} 
 / * ROBOTO粗体/ 700 +斜体* / 
 @ 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 ''）格式（'woff'），
 url（'/ includes / fonts / roboto-bolditalic.ttf'）格式（'truetype'），
 url（'/ includes / fonts / roboto- bolditalic .svg＃Roboto-Regular'）格式（'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 ''）格式（'woff'），
 url（'/ includes / fonts / roboto-thin.ttf'）格式（'truetype'），
 url（'/ includes / fonts / roboto-thin .svg＃Roboto-Regular'）格式（'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 ''）格式（'woff'），
 url（'/ includes / fonts / roboto-thinitalic.ttf'）格式（'truetype'），
 url（'/ includes / fonts / roboto-thinitalic .svg＃Roboto-Regular'）格式（'svg'）; 
 font-weight：100; 
 font-style：italic; 
} 
  

其他字体文件似乎是正确的，这个也是这样Mac / Chrome，但是Win / Chrome在渲染Roboto bold和Roboto时出现问题，对于a和e的字体大小介于13px和16px之间，而对于i，介于10px和14px之间。 我通过使用旧的roboto版本的.woff文件来修复这个版本，但这不是一个解决方案，我把它称为一个肮脏的解决方法...

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

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

After listening to the latest Google I/O stream I was more than happy that they released a new version/update for their own font Roboto in their style guide.

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

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

This is a screenshot of after(top) and before the update (bottom):

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

This is a live demo of the bold versions:

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

As I use Roboto in more than one project (web sites and web apps, both desktop and responsive) I was thrilled to implement it immediately. The preview was clean and well spaced and all but while testing, I had to find out, that the Google Chrome (latest stable) on Windows has problems rendering the bold and bold-italic versions of the font.

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.

I'm using all 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;
}

The other font files seem to render correct and this one does so as well on Mac/Chrome but Win/Chrome has problems rendering Roboto bold and Roboto bolditalic for font sizes between 13px and 16px for a's and e's and between 10px and 14px for the i's.

I "fixed" it by using the .woff files of the old roboto version for bold and bolditalic but that's hardly a fix, I'd call it a dirty workaround...

Any ideas?

解决方案

If you have the latest version (v35 today) you can enable DirectWrite, which solved this issue for me. Just enter chrome://flags in the address bar, locate the Enable DirectWrite setting and click on Enable.

Source: http://www.tekrevue.com/tip/chrome-font-rendering-windows/

这篇关于Google I / O - Chrome中的Roboto字体（新版本）字体呈现问题（Windows）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！