html - Google 字体加载说明

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;
}

So, does the browser look at what characters you use, and THEN load the used font? Or does it depend on your browser settings? I can't find any resource that documents this behaviour (or I'm searching for the wrong keyword). I suspect it has something to do with the unicode-range: at the bottom of the CSS.

Answer 1

1. 浏览器读取 @import 指令，告诉他加载这个由 Google 提供的 CSS 页面:http://fonts.googleapis.com/css?family=Roboto:300 .此页面会立即加载。

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

I suspect it has something to do with the unicode-range: at the bottom of the CSS.

是的，就是这样。 unicode-range 指定该字体包含哪一类字符(例如西里尔字符)。如果您的页面中没有那种愤怒的字符，则不会下载这些字体。

供引用:https://en.wikipedia.org/wiki/Unicode_block