Web 字体优化 - 通过字体延迟加载提升页面加载速度

针对 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();
};