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

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

1. @font-face {
2.     font-family: 'MyFont';
3.     src: url('path/to/font.woff2') format('woff2'),
4.         url('path/to/font.woff') format('woff');
5. }
7. body {
8.     font-family: 'MyFont', sans-serif;

复制代码

但是在首次加载一个页面时，欣赏器会根据css中字体的使用环境，来决定是否加载某个字体文件，而不是提前加载好。
这样就会有延迟，可能会带来一些题目，比如字体的延迟和闪烁。
像下面这样

一开始是一个字体，过了一会又变成别的字体。
那假如你在字体还没加载好的时候，就去获取字体的宽度，那这个时候的宽度就是不正确的，在做一些计算的时候，就没办法得到正确的值。
这个时候就可以用html中link标签的rel="preload"属性来预加载字体。
示例：
html

1. <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中新增的属性，老版本的欣赏器可能不支持，注意兼容性。
  
• 假如你预加载的字体并没有得到使用，那这样就会白白浪费性能，并且控制台也会举行警告，以是一定要注意字体的使用环境。
  

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。