Google Font API 使用浏览器检测。如何获取字体的所有字体变体

Posted 2023-03-15

【中文标题】Google Font API 使用浏览器检测。如何获取字体的所有字体变体

【英文标题】：Google Font API uses browser detection. How to get all font variations for font-face

【发布时间】：2014-09-20 14:27:06

【问题描述】：

我刚刚发现 Google Font API 使用浏览器检测

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

所以如果我想让它在所有浏览器中工作，我不能只是抓住它并在我自己的字体中使用它。许多人这样做，但不知道它不会在任何地方都有效

获取字体的所有变体的方法是什么？ woff2/woff/ttf/等？ （用作字体的后备）

我刚刚尝试在 Chrome 中打开该 api 页面，在 Developer 中更改浏览器用户代理欺骗，并查看变体。我看到至少 4 个

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

【参考方案1】：

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

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

它为所有浏览器生成 CSS，并让您下载文件以用于自托管 Google 字体文件。效果很好！

【讨论】：

这是一个很棒的工具！如果您一直在胡闹谷歌网络字体的来源，试图下载正确的 woff、eof 和 svg 文件，请不要再犹豫了。我多年来一直需要这个工具。

【参考方案2】：

以 Open Sans 为例。

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

向不同的用户代理发出请求以查看不同的字体：.eot、.woff、woff2、.ttf、.svg

对于 .eot，请使用以下用户代理：

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

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

http://caniuse.com/#search=eot http://caniuse.com/#search=ttf http://caniuse.com/#search=svg http://caniuse.com/#search=woff http://caniuse.com/#search=woff2

【讨论】：

到目前为止，woff 和 woff2 基本上涵盖了所有基础。除了 Opera Mini，但是那个浏览器什么都不支持。

使用这种方法，我能够生成带有 ttf 字体的样式。这使我能够修复浏览器中从 html 生成的 PDF 文件中的搜索功能。使用 woff2 字体搜索不起作用。

【参考方案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 */

有关更多信息，请参阅此答案：Link

【讨论】：

是的，我也是这么做的。毕竟，我的目标是对字体进行本地后备。然后我意识到现在使用谷歌字体实际上很好（而且快速简单）..但是thanx ;)

此时你真的只需要woff2和woff。至少不支持 woff 的浏览器要么根本不支持 webfonts，要么是非常老的浏览器，充满了安全问题。