之前看到 @林木木 的这篇文章时,觉得霞鹜文楷这个字体很好看,于是在本站也启用了,这个字体和我平常见到的网页的字体很不一样,就是感觉加载速度特别快。它不像其他网页一次性加载整个字体,而是分批加载,就像慢慢展开的画面一样。这让我很好奇,于是查了一下,原来是因为一种特殊的CSS属性叫做”unicode-range“。
这个属性的作用是设置要由所定义的字体中使用的字符的特定范围,这样就可以把整个字体文件切成很多小块,一个很大的字体文件在打开网页时可能只需要加载一小部分文件分块,足够显示页面上的文字。这样极大的加快了字体文件的加载速度。
后面又发现了一个中文字体分包的项目:✨中文网字计划
在这里提供了大量已经进行分片的字体的cdn,可以很方便的直接引用,也提供了在线分片工具,可以一键上传分片然后下载下来使用~
现在本站使用的字体也是在这个项目上进行分包的,加载速度快得很!
发表回复