网页中第三方字体加载优化方案

前言

前几天写了 CSS更改网站字体 这篇文章之后有人问我网站什么字体，我就把css发了过去，于是今天想写一篇关于网页使用第三方字体的详细讲解。

错误代码

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

用上述方式去使用第三方字体，虽然正常使用，但是有一个问题，即字体没有加载之前网页是空白的。

再来讲解一下相关属性与参数

font-display属性

font-display 属性决定了一个 @font-face 在不同的下载时间和可用时间下是如何展示的。 字体显示时间线基于一个计时器，该计时器在用户代理尝试使用给定下载字体的那一刻开始。时间线分为三个时间段，在这三个时间段中指定使用字体的元素的渲染行为。

字体周期

1. 字体阻塞周期 如果未加载字体，任何试图使用它的元素都必须渲染不可见的后备字体。如果在此期间字体已成功加载，则正常使用它。
2. 字体交换周期 如果未加载字体，任何尝试使用它的元素都必须呈现后备字体。如果在此期间字体已成功加载，则正常使用它。
3. 字体失败周期 如果未加载字体，用户代理将其视为导致正常字体回退的失败加载。

参数

• auto ：使用浏览器默认的行为；
• block ：浏览器首先使用隐形文字替代页面上的文字，并等待字体加载完成再显示；
• swap ：如果设定的字体还未可用，浏览器将首先使用备用字体显示，当设定的字体加载完成后替换备用字体；
• fallback ：与 swap 属性值行为上大致相同，但浏览器会给设定的字体设定加载的时间限制，一旦加载所需的时长大于这个限制，设定的字体将不会替换备用字体进行显示。 Webkit 和 Firefox 中设定此时间为 3s；
• optional ：使用此属性值时，如果设定的字体没有在限制时间内加载完成，当前页面将会一直使用备用字体，并且设定字体继续在后台进行加载，以便下一次浏览时可以直接使用设定的字体。

实例

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

JS加载CSS改变字体

当然了也可以使用JS加载字体，之前的文章里面提到了JS更改网站字体，现在一块总结一下

//判断浏览器是否支持
if (document.fonts) {
    const font = new FontFace('fontFamilyName', 'url(${url})');
    document.fonts.add(font);
    font.load();
    font.loaded.then(() => {
        document.body.style.fontFamily = 'fontFamilyName';
    }).catch(err => {
        console.log(err);
    });
} else {
    console.error('抱歉，不支持的浏览器');
}