typekit, google fonts 请求的字体文件是如何被被浏览器使用的？

[Karpov]

typekit, google fonts 请求的字体文件是如何被被浏览器使用的？

开发者只要在页面的 head 标签里填上了 typekit, google fonts 提供的 scripts, 然后就能直接在 CSS 中引用字体样式。

研究了一下发现，在 chrome network 标签中看到了这个 scripts 有请求一些字体文件，但是我在 source 标签下没有看到下载的字体文件。

请问 typekit, google fonts 请求的字体文件是如何被被浏览器使用的？

[dalieba]

这个有两种方式，一个是使用 @import 规则导入，像 amirifont.org 网站的 css 样式就有这样的代码：
@import url( https://fonts.googleapis.com/css?family=Amiri:400italic&subset=latin);
另一种是使用 link 标签，britannica.com 的 html 源代码就有：
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300,400,400i,700,700i">
然后浏览器就会从指定外部资源载入字体了。

[dalieba]

不过 Chrome network 标签没有办法看到下载的字体文件，需要到应用店下载扩展，Firefox 可以查看。