谷歌字体加载说明

Question

我想知道google fonts是如何发现的，应该加载哪些字体。例如，当我在CSS中使用此

@import '//fonts.googleapis.com/css?family=Roboto:300';

它返回一个立即解释的CSS（加载此资源甚至会阻止浏览器呈现afaik）：

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/0eC6fl06luXEYWpBSJvXCIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/Fl4y0QdOxyyTHEGMXX8kcYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
// ...and some more

我一直认为，当您在CSS中提供url（...）时，浏览器会立即加载此资源。

但是，当您打开这支笔http://codepen.io/anon/pen/EgkvEr并查看您的网络选项卡（可能清除您的缓存）时，您可以看到它恰好加载了两个资源：http://fonts.googleapis.com/css?family=Roboto： 300，然后http://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2这是正常的拉丁范围（在加载的字体css的底部定义）：

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

那么，浏览器是否会查看您使用的字符，然后加载使用的字体？还是取决于您的浏览器设置？我找不到任何记录此行为的资源（或者我搜索了错误的关键字）。我怀疑它与CSS底部的Unicode-range：有关。

Answer 1

• 浏览器执行页面布局并确定在页面上呈现指定文本需要哪些字体变体。
• 对于每个所需的字体，浏览器都会检查该字体是否在本地可用。
• 如果文件在本地不可用，它会迭代外部定义：
• 如果出现格式提示，浏览器会在启动下载之前检查它是否支持它，否则会前进到下一个。
• 如果没有格式提示，浏览器会下载资源。

Google web字体优化

Answer 2

>

浏览器读取导入指令，该指令告诉他加载Google提供的CSS页面：http://fonts.googleapis.com/css?family=Roboto:300.此页面立即加载。

在该页面中，有一些指示告诉浏览器字体文件的位置。浏览器在需要这些字体之前不会下载它们。例如，如果任何元素从未使用过该字体，浏览器将不会下载该字体。

我怀疑这与CSS底部的unicode范围有关。

是的，就是这样<代码>unicode范围指定该字体包括哪类字符（例如西里尔字符）。如果页面中没有这种愤怒的字符，这些字体将不会被下载。

供参考：https://en.wikipedia.org/wiki/Unicode_block