前言

前几天写了canvas动态加载字体这篇文章之后有人问我网站什么字体，我就给css发了过去，于是今天想写一篇关于网页使用第三方字体的优化。

优化

正常都是使用

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

div {
  font-family: myFirstFont;
}

这种方式去使用第三方字体，但是有一个问题，字体没有加载之前网页是空白的

font-display

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

参数

• 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;
}

资料

font-display ：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face/font-display

JS加载

当然了也可以使用JS加载字体，之前的文章里面提到了document.fontsAPI,字体加载完以后在通过添加CSS也是可以同样的效果

资料

fonts：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/fonts

实现代码

//判断浏览器是否支持
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('抱歉，不支持的浏览器');
}