使用font-display 优化第三方字体加载

在日常的搬砖过程中，我对于网页字体的使用相对较少，不管是自己开发的网站还是利用Wordpress 之类的来建站，经常用的无非就是是 font-family ，还有可能会使用到一些第三方字体。

但是很多时候，在加载字体可能会遇到问题，在字体加载完成之前，使用了第三方字体的网页上的文字就会变成空白，一直要等到字体加载完成才能正常显示。假如字体文件本身比较小都还好说，但是文件一大就会严重拖慢网页加载速度，影响访问者的心情。

为了解决这个问题CSS Fonts Module Level 3 中有一个 font-display 属性，这个属性属性决定了一个@font-face 在不同的下载时间和可用时间下是如何展示的，也就是可以让浏览器在web 字体加载完成使用备用字体，加载完成之后立即替换为指定的字体，并重新渲染。

兼容性

语法

font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

属性值

auto 典型的浏览器字体加载的行为会发生，也就是使用自定义字体的文本会先被隐藏，直到字体加载结束才会显示。

block 浏览器首先使用隐形文字替代页面上的文字，并等待字体加载完成再显示。

swap 后备文本立即显示直到自定义字体加载完成后再使用自定义字体渲染文本。

fallback 这个可以说是auto 和swap 的一种折中方式。需要使用自定义字体渲染的文本会在较短的时间（有资料说可以到100ms ）不可见，如果自定义字体还没有加载结束，那么就先加载无样式的文本。一旦自定义字体加载结束，那么文本就会被正确赋予样式。

optional 效果和fallback 几乎一样，都是先在极短的时间内文本不可见，然后再加载无样式的文本。不过optional 选项可以让浏览器自由决定是否使用自定义字体，而这个决定很大程度上取决于浏览器的连接速度。如果速度很慢，那你的自定义字体可能就不会被使用。

使用方法

@ font-face {
  font-family: ExampleFont;
  src: url（/path/to/fonts/examplefont.woff）format（'woff'），
       url（/path/to/fonts/examplefont.eot）format（'eot'）;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

如果你不知道选择那个作为font-display 的属性值，你可以就选择swap 。它不仅提供了自定义字体和内容的可访问性之间的最佳平衡，它还提供了和使用JavaScript 脚本相同的字体加载行为。如果你在页面上有想要加载的字体，但是最终也可以不加载，这时你就可以考虑使用fallback 或者optional 作为font-display 的值。

不支持font-display 怎么办？

font-display 的唯一缺陷就是还没有得到广泛的支持，如果你的浏览器不支持，但是你又使用了这个属性也不用担心，它不会对你的页面产生任何影响。如果浏览器不支持的话，我们可以先需要去判断浏览器是否支持font-display 属性，如果不支持就可以使用使用第三方JavaScript 脚本，比如Font Face Observer ，或者是使用在Firefox , Chrome 和 Opera 支持的字体加载API 。

if ("fontDisplay" in document.body.style === false) { 
     if("fonts" in document) { 
            document.fonts.load("1em Open Sans Regular"); 
            document.fonts.ready.then(function(fontFaceSet){ 
                   document.documentElement.className += " fonts-loaded"; 
            }) 
       }
 }

还有CSS Font Loading API 可以监听加载事件，在加载完成后通过替换class 也可以达到 font-display: swap 的效果。

const font = new window.FontFace('fontFamilyName', 'url(${url})');
document.fonts.add(font);
font.load().then(info => {
    document.body.style.fontFamily = 'fontFamilyName';
}).catch(err => {
    console.log(err);
});