3

我读过“Google Web Fonts 尽最大努力提供正确的版本，但有时浏览器和操作系统之间会发生巨大的变化。”

我想在我的 CSS 中使用以下内容：font-family: 'Open Sans', sans-serif;

所以我在我的页面顶部包含了这个：

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,700" />

这就是我需要做的一切吗？如果是这种情况，那么 Google Web Fonts 如何为我的浏览器确定正确的版本。

此外，如果我包含它，那么该字体很可能会存在于我的浏览器中。我可以假设大多数用户已经拥有该字体的副本吗？

4

1 回答 1

4

Google Web Fonts 使用用户代理嗅探来确定浏览器。这里有些例子。

对于谷歌浏览器，它返回一个 WOFF 字体：

$ curl -A 'Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1667.0 Safari/537.36' http://fonts.googleapis.com/css?family=Open+Sans:400,700
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

对于Internet Explorer 10，它返回一个 EOT 和一个 WOFF 字体：

$ curl -A 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)' http://fonts.googleapis.com/css?family=Open+Sans:400,700
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot);
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHZ2MAKAc2x4R1uOSeegc5U.eot);
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHZ2MAKAc2x4R1uOSeegc5U.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

关于您的第二个问题：Web 字体未永久安装在客户端上。它们只存在于浏览器缓存中。如果缓存被清除，字体会重新下载。此外，如果两个网站从不同的 URL 提供相同的字体，则该字体会被加载两次。

但是，如果客户端操作系统恰好在系统范围内安装了某种字体，它将使用操作系统版本而无需下载。这就是localCSS 中的源代码的用途。

于 2013-10-19T14:47:07.137 回答