Google 字体加载说明

Question

我想知道，谷歌字体如何找到，加载哪些字体。例如，当我在 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

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

body {
  font-family: 'Roboto';
}

<h1>Hello äöüß</h1>

并查看您的网络选项卡（也许清除缓存），您可以看到它恰好加载了两个资源：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

1. 浏览器读取

   @import

   指令，告诉他加载由Google提供的CSS页面：http://fonts.googleapis.com/css?family=Roboto:300。此页面会立即加载。

2. 在该页面中，有一些

   url()

   指令告诉浏览器字体文件位于何处。 浏览器在需要时才会下载这些字体。例如，如果任何元素从未使用过该字体，则浏览器将不会下载它。

我怀疑这与 CSS 底部的

unicode-range

: 有关。

是的，就是这样。

unicode-range

指定该字体包含哪一类字符（例如，西里尔字符）。如果您的页面中没有这种流行的字符，这些字体将不会被下载。

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

Answer 2

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

Google 网页字体优化