JS字体预加载

Question

在做移动端h5的开发，需要用到自定义字体，但是每次进去都要过一段时间字体才加载出来，有没有像图片预加载一样的字体预加载方法

Answer 1

你用的字体是用整一个库吗？如果只是你用到的字体才有，加载不会很慢的。

Answer 2

可以先使用系统默认字体，等自定义字体加载完毕以后在使用自定义字体。

定义字体的时候使用font-display: swap;

有几种不同的font-display，效果上会带来微妙的差别

1. font-display: swap：浏览器会直接使用font-family中最先匹配到的已经能够使用的字体，然后当font-family中更靠前的字体成功载入时，切换到更靠前的字体，相当于是FOUT。
2. font-display: fallback: 浏览器会先等待最靠前的字体加载，如果没加载到就不显示任何东西，这个过程大约持续100ms，然后按照顺序显示已经成功载入的字体。在此之后有大约3s的时间来提供切换到加载完毕的更靠前的字体。
3. font-display: optional: 浏览器会先等待最靠前的字体加载，如果没加载到就不显示任何东西，这个过程大约持续100ms，然后字体就不会再更改了（一般第一次打开某页面的时候都会使用fallabck字体，字体被下载但是没被使用，之后打开时会使用缓存中的字体）。

即：

body{
 font-family: Arial, sans-serif, '微软雅黑', HYXiaoMaiTiJ;
}
// 自定义字体HYXiaoMaiTiJ
@font-face {
    font-family: 'HYXiaoMaiTiJ';
    src: url('.../HYXiaoMaiTiJ.ttf');
    font-display: swap;  // 先匹配到的已经能够使用的字体,字体成功载入后切换字体
}
p{
 font-family: 'HYXiaoMaiTiJ';
}

参考链接
https://blog.csdn.net/weixin_...