Question

我读过“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如何为我的浏览器确定正确的版本。

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

Answer 1

Google Web Fonts使用用户代理嗅探来确定浏览器。以下是一些例子。

对于 Google Chrome ，它会返回一个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提供相同的字体，则会加载两次字体。

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

Google Web Fonts如何决定向我的浏览器提供哪种版本的字体？

1 个答案: