我最近一直在努力实现流畅的谷歌网页字体，主要是在Windows谷歌Chrome上。
我以前一直在使用直接的样式表代码，它是从谷歌网页字体提供的URL中提取的，例如谷歌提供的：
<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字体页面上的渲染方式，与我使用该过程创建的测试页面相比：https://i.stack.imgur.com/ydthy.png)
我的问题是，为什么<链接/>版本使字体流畅，当它用我的速记方法寻找相同的字体时？还有，我有什么理由应该使用这种方法吗？我认为这种方法可以缩短请求时间？
有几个问题可以回答您的问题。主要是链接的URL实际上为不同的浏览器显示不同的CSS。因此，如果你在Chrome中打开它并复制该CSS，那么它可能在Internet Explorer中不起作用(尤其是9之前的版本)。
此外，您使用的字体重量为200，这是一个"轻"的重量。常规文本的默认值为400。因此，除非指定200的字体，否则某些浏览器根本不会显示字体的可能性很小。这样的东西应该会有所帮助：
body {
font-family: "Titillium Web", sans-serif;
font-weight: 200;
}
将其添加到您的CSS文件中：
@import url('http://fonts.googleapis.com/css?family=Titillium+Web:200');