Angular 由一个bug说起之六：字体预加载

浏览器在加载一个页面时，会解析网页中的html和css，并开始加载字体文件。字体文件可以通过css中的@font-face规则指定，并使用url()函数指定字体文件的路径。

比如下面这样:

css

css 复制代码

@font-face {
    font-family: 'MyFont';
    src: url('path/to/font.woff2') format('woff2'),
        url('path/to/font.woff') format('woff');
}

body {
    font-family: 'MyFont', sans-serif;

但是在首次加载一个页面时，浏览器会根据css中字体的使用情况，来决定是否加载某个字体文件，而不是提前加载好。

这样就会有延迟，可能会带来一些问题，比如字体的延迟和闪烁。

像下面这样

一开始是一个字体，过了一会又变成别的字体。

那假如你在字体还没加载好的时候，就去获取字体的宽度，那这个时候的宽度就是不正确的，在做一些计算的时候，就没办法获得正确的值。

这个时候就可以用html中link标签的rel="preload"属性来预加载字体。

示例：

html

html 复制代码

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

上面就是一个link标签，表示我们预加载了一个名为font.woff2的字体文件。其中，href属性指定了文件的路径，as属性指定了文件的类型，type属性指定了文件的MIME类型（浏览器会根据type 属性的值来确定是否支持该资源，如果不支持，则会忽略它，仅在支持时才会下载它），crossorigin属性表示该资源是否应该使用一个CORS请求来获取(比如字体就需要使用CORS请求，因为字体可能来自不同的域，如果不设置此属性，浏览器将忽略预加载的字体)，并且该属性的值需要与资源的CORS和凭据模式相匹配，即使获取请求不跨域也需要设置。

crossorigin属性允许的值有两个：

1.anonymous(默认值)

请求使用了 CORS 标头，且证书标志被设置为 'same-origin'。没有通过 cookies、客户端 SSL 证书或 HTTP 认证交换用户凭据。

2.use-credentials

请求使用了 CORS 标头，且证书标志被设置为 'include'。总是包含用户凭据。

使用预加载可以让字体文件在页面加载时被优先加载，以便在字体使用之前提前下载完成，这样就不会有延迟和闪烁了。

但是，在使用preload时，有两个点要注意一下：

rel preload属性是html5中新增的属性，老版本的浏览器可能不支持，注意兼容性。
如果你预加载的字体并没有得到使用，那这样就会白白浪费性能，并且控制台也会进行警告，所以一定要注意字体的使用情况。

总结，字体预加载有利有弊，要慎用。