跟随系统
浅色模式
深色模式
打赏站长

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

前端技术
预计阅读 5分钟
2024-03-08
返回博客

针对 CSS 内单独声明的fomt-family,浏览器的字体加载可能有延迟。

例如:

字体的延迟加载可能会延迟文本渲染。浏览器必须先构建依赖于 DOM CSSOM Render 树,然后才能知道它需要哪些字体资源来渲染文本。

因此,字体会在其他关键资源请求之后延迟很长时间才开始请求,并且在获取字体资源之前浏览器可能阻塞文本渲染。

 

并且据调查,大部分用户在打开一个网站的时候,很不喜欢浏览器标签上一直加载的这种感觉。会觉得这个网站加载慢,影响继续看下去的欲望。

recording.gif


所以我们要做的是,让页面先加载完成,特殊字体使用到的地方用正常字体先显示。 然后在页面加载完毕后再加载字体。

当然这样会造成另外两个问题:

布局偏移(一部分字体会)

字体闪烁(必然,因为会从字体A切换到字体B,如下图)

recording.gif

尽管如此,但我认为这样做对于企业网站类型的网站来说是非常有必要的。


代码部分

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