前言

今天在修改本站字体样式时，遇到了问题，于是找了一些资料，最终解决！

更改字体

正常修改网站字体样式都是使用

@font-face{
  font-family:myfont;
  src:url(font.woff);
}
*{
  font-family:myfont;
}

但是使用这种方法有个问题：字体没有加载之前网页是空白的，或者说文字不显示
不知道你们有没有遇到过以上的问题，那么该怎么办呢，接下来为大家解决

优化

CSS版：

@font-face{
  font-family:myfont;
  src:url(font.woff)format('woff'),
      url(font1.woff)format('woff');
  font-display:swap;
}
*{
  font-family:myfont;
}

JS版：JS仅加载字体，还需要配合CSS使用

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

总结

该优化方法的原理是：当指定的字体无法加载出来时，将使用设定的规则与备用字体进行替换，从而完成字体加载。