针对 CSS 内单独声明的fomt-family,浏览器的字体加载可能有延迟。
例如:
字体的延迟加载可能会延迟文本渲染。浏览器必须先构建依赖于 DOM 和 CSSOM 的 Render 树,然后才能知道它需要哪些字体资源来渲染文本。
因此,字体会在其他关键资源请求之后延迟很长时间才开始请求,并且在获取字体资源之前浏览器可能阻塞文本渲染。
并且据调查,大部分用户在打开一个网站的时候,很不喜欢浏览器标签上一直加载的这种感觉。会觉得这个网站加载慢,影响继续看下去的欲望。
所以我们要做的是,让页面先加载完成,特殊字体使用到的地方用正常字体先显示。 然后在页面加载完毕后再加载字体。
当然这样会造成另外两个问题:
布局偏移(一部分字体会)
字体闪烁(必然,因为会从字体A切换到字体B,如下图)
尽管如此,但我认为这样做对于企业网站类型的网站来说是非常有必要的。
代码部分
function loadFont() {
console.log('%c开始加载字体', 'color:green;font-size:20px;');
var str = "<style>@font-face{font-family:'AliHeavy';src:url('/static/font/AlibabaPuHuiTi.ttf');}</style>";
$('head').append(str);
}
window.onload = function () {
loadFont();
};