Question

我最近一直在努力实现流畅的Google网络字体，主要是在谷歌Chrome浏览器上。

我以前一直在使用直接样式表代码，从Google Web Fonts提供的网址中删除，例如，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）

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

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');

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

2 个答案: