前言
字体,作为文字的呈现方式,在以文字为重的使用场景(如试卷,博客等)尤为重要。
如果我们要在打印时使用字体,那么我们只需要将字体下载下来,安装到计算机上并使用即可。
在博客等网页上使用也没有什么大区别,通常使用「引入外部 css」的方式来加载。
比如,网页开发者使用 https://fonts.googleapis.com/css2?family=Fira+Code
就可以将 Fira Code 这款字体导入你当前的网页,使用只需一行 css:
pre > code {
white-space: pre;
font-family: "Fira Code" !important;
}
(注:Fira Code 支持连字,是很优秀的等宽字体!本博客使用 Fira Code 作为代码显示字体)
if (a == b) puts(c>=d ? "Yes" : "No");
就可以给网页中的代码块都使用 Fira Code。
对于中文字体,这样本来也是可行的,但是由于中文数量太多,单个字体文件加载太过耗时,这样引入字体会导致网页加载时间大幅变长,降低用户体验。
这时,「中文网字计划」应运而生,为广大简体中文使用者提供了一种更好的方式。
官网为 https://chinese-font.netlify.app/ ,快去看看吧!
它如何工作?
它的原理很简单,通过「字体分包」来将大字体文件变为零碎的文件,并且「按需取用」,减小带宽占用。
官网提供 cdn,不过字体比较有限,如果需要使用自己的字体,并且自建 cdn,那么需要使用他们的分包工具。
分包工具可以用多种方式运行:浏览器在线分包,node.js 环境分包等,推荐使用 node.js 环境分包。
首先安装它的 npm 包:
npm install @konghayao/cn-font-split -g # 如果使用命令行,推荐全局安装
然后命令行分包:
cn-font-split -i=./input.ttf -o=./output-dir
你会得到一个文件夹,将其上传到 cdn,在需要时引用里面的 result.css
即可。
性能概况
我网站使用的字体,大小 15.7M,在分包之后,我这里基本在 2 秒内可以加载完所有文件(清除缓存)。