为什么Google Web Fonts在使用直接样式表@fontface时无法正常呈现？

Question

我最近一直在努力实现流畅的Google Web Fonts,主要是在Windows Google Chrome上.

我以前一直在使用直接样式表代码,从Google Web Fonts提供的URL中删除,例如,Google提供:

<link href='http://fonts.googleapis.com/css?family=Titillium+Web:200' rel='stylesheet' type='text/css'>

所以我转到URL并使用以下代码

@font-face {
   font-family: 'Titillium Web';
   font-style: normal;
   font-weight: 200;
   src: local('Titillium WebThin'), local('TitilliumWeb-Thin'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wpr-K9kSItTeDn2USN0q77Oh4.woff) format('woff');
}

我认为这是一种保存更快的速度而不是向谷歌提出请求的厚颜无耻的方式,后者似乎又提出另一个请求来获取字体.

我最近发现这是渲染问题的原因(请参阅以下示例,了解Windows Chrome浏览器在Web字体页面​​上的呈现方式,与我使用该过程创建的测试页面相比:http://imgur.com/OV2U1 ,ema2B)

我的问题是,当使用我的速记方法获取相同的字体时,为什么<link />版本使字体平滑？而且,有什么理由我应该使用这种方法,我认为这会缩短请求时间？

Answer 1

有一些问题可能会回答您的问题.主要的一点是链接的URL实际上为不同的浏览器显示不同的CSS.因此,如果您在Chrome中打开它并复制该CSS,那么它可能无法在Internet Explorer中运行(特别是在版本9之前).

此外,您使用的字体重量为200,这是一个"轻"的重量.常规文本的默认值为400.因此,除非您指定字体权重为200,否则某些浏览器根本不显示字体的可能性很小.这样的事情应该会有所帮助:

body {
    font-family: "Titillium Web", sans-serif;
    font-weight: 200;
}

Answer 2

将其添加到您的 CSS 文件中：

@import url('http://fonts.googleapis.com/css?family=Titillium+Web:200');