网站自定义字体优化

56天前338阅读约1分钟 

来到我博客的很多小伙伴都觉得字体很有个性,其实我也是在博友博客那看到的。

然后博客字体来自开源项目:https://github.com/SolidZORO/zpix-pixel-font

其实自定义字体一般建议不要大于 2M,如果太大,光加载完都是问题,哈哈,但是架不住我喜欢。

不过虽然 CDN 可以加快加载速度,但是我一直还是纠结到底要不要去掉自定义字体,虽然字体包也才 965KB,嘻嘻。

昨晚偶然看到知乎上的文章,发现可对字体进行预渲染优化加速,操作如下:

使用@font-face{font-display:swap}模式可减少用户看到文字的等待时间,可以实现打开网页先显示系统字体,然后在零点几秒后变成新的字体。

当你自定义了@font-face,其实并不能触发字体文件的下载,只有等浏览器解析到使用了该字体文件的 DOM 元素才会触发字体文件下载,是否能让浏览器提前加载字体文件呢?答案是通过 preload 方式提前加载字体文件。

在<head>和</head>中间加入如下代码<link rel="preload" href="yourfont.woff2" as="font" type="font/woff2" crossorigin>,将上面字体链接换为自己的即可,这样就起到预加载的作用了。

通过这两个方法,最终可以解决网页字体加载慢的问题,测试了下,确实可以将加载时间控制在 500 毫秒左右,原本在 1 秒多左右,哈哈。

分享字体8 

网站自定义字体优化 - Jdeal | Life is like a Design.