5

我最近一直在努力实现流畅的 Google Web 字体，主要是在 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');
}

我认为这是一种节省更多速度的厚颜无耻的方法，而不是向 Google 发出请求，然后 Google 似乎又发出了另一个请求来获取字体。

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

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

4

2 回答 2

7

有几个问题可以回答你的问题。主要的一个是链接的 URL 实际上为不同的浏览器显示不同的 CSS。因此，如果您在 Chrome 中打开它并复制该 CSS，那么它可能无法在 Internet Explorer 中运行（尤其是 9 之前的版本）。

此外，您使用的字体粗细为 200，这是一个“轻”粗细。常规文本的默认值为 400。因此，除非您指定字体粗细为 200，否则某些浏览器根本不显示字体的可能性很小。这样的事情应该会有所帮助：

body {
    font-family: "Titillium Web", sans-serif;
    font-weight: 200;
}
于 2013-02-06T18:18:03.060 回答
1

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

@import url('http://fonts.googleapis.com/css?family=Titillium+Web:200');
于 2012-11-27T17:44:15.753 回答