谷歌字体API使用浏览器检测.如何获得font-face的所有字体变化

Question

我刚刚发现谷歌字体API使用浏览器检测

这意味着当您打开http://fonts.googleapis.com/css?family=Racing+Sans+One时，它将只显示您当前浏览器所需的内容

如果我想让它在所有浏览器中工作，我就不能把它放到我自己的font-face中。许多人这样做，却不知道它不会在任何地方都起作用

获得字体的所有变化的方法是什么?woff2/woff/ttf/等。?(用作font-face的回退)

我只是试着在Chrome中打开api页面，在开发人员中更改浏览器useragent欺骗，并通过变化。我看到至少4个

woff2/woff/ttf是否足够，或者我需要多少个版本才能安全?我也需要EOT/SVG版本吗?

Answer 1

正确的答案是，使用这个网站由MajoDev:

https://google-webfonts-helper.herokuapp.com/

它为所有浏览器生成CSS，并允许您下载自托管谷歌字体文件的文件。工作好了!

Answer 2

以Open Sans字体为例

http://fonts.googleapis.com/css?family=Open +无

使用不同的用户代理请求查看不同的字体:.eot， .woff, woff2， .ttf， .svg

使用这些用户代理:

IE8
Mozilla/5.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; GTB7.4; InfoPath.2; SV1; .NET CLR 3.3.69573; WOW64; en-US)
IE7
Mozilla/5.0 (Windows; U; MSIE 7.0; Windows NT 6.0; en-US)
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot);
}

对于.woff2使用以下用户代理:

Firefox 36.0
Mozilla/5.0 (Windows NT 6.3; rv:36.0) Gecko/20100101 Firefox/36.0
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

对于.woff使用这些用户代理:

Safari 6.0
Mozilla/5.0 (iPad; CPU OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5355d Safari/8536.25
Internet Explorer 11.0
Mozilla/5.0 (compatible, MSIE 11, Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko
Internet Explorer 10.0
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/6.0)
Internet Explorer 9.0
Mozilla/5.0 (Windows; U; MSIE 9.0; Windows NT 9.0; en-US))
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}

对于.ttf使用以下用户代理:

Safari 5.0.5
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1
Safari 3.1
Mozilla/5.0 (Macintosh; U; PPC Mac OS X 10_5_2; en-gb) AppleWebKit/526+ (KHTML, like Gecko) Version/3.1 iPhone
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3SZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');
}

我在尝试其他用户代理时发现了另一个。ttf。

Safari 4.1
Mozilla/5.0 (Windows; U; Windows NT 5.0; en-en) AppleWebKit/533.16 (KHTML, like Gecko) Version/4.1 Safari/533.16
Firefox 5.0
Mozilla/5.0 (X11; Linux) Gecko Firefox/5.0
Firefox 3.5.9
Mozilla/5.0 (Windows; U; Windows NT 6.1; et; rv:1.9.1.9) Gecko/20100315 Firefox/3.5.9
Safari 3.1.1
Mozilla/5.0 (Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_0_1 like Mac OS X; fr-fr) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5G77 Safari/525.20
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}

对于.svg使用这些用户代理:

Safari 4.0.4
Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10gin_lib.cc
Safari 3.0
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C25 Safari/419.3
Safari 3.0
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/l/font?kit=cJZKeOuBrn4kERxqtaUH3Zbd9NUM7myrQQz30yPaGQ4#OpenSans) format('svg');
}

哪些浏览器支持哪些字体格式?

1. http://caniuse.com/搜索=测试结束
2. http://caniuse.com/搜索= ttf
3. http://caniuse.com/搜索= svg
4. http://caniuse.com/搜索= woff
5. http://caniuse.com/搜索= woff2

Answer 3

至少试着下载这些不同的webfonts: eot, woff, ttf, svg，然后你可以像这样使用它们，以获得最大的跨浏览器的好处:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

链接