前端字体预加载处理

一：
1.单独创建一个css用于自定义字体
@font-face {
    src:url("../font/pf.ttf");
    font-family: '苹方字体';
    font-display: swap;//先使用系统默认字体，等自定义字体加载完再使用该字体
}
*{
    font-family: '苹方字体';
}
2.全局js动态-延迟加载css文件
(function () {//使用匿名函数
   setTimeout(function () {
       var head = document.getElementsByTagName('head')[0];
       var link = document.createElement('link');
       link.type='text/css';
       link.rel = 'stylesheet';
       link.href = '../../css/font.css';
       head.appendChild(link);
   },3000);
})();
二:link标签预加载rel属性：prefetch 
<link rel="prefetch stylesheet" href="../../css/font.css">