前言

字体，作为文字的呈现方式，在以文字为重的使用场景（如试卷，博客等）尤为重要。

如果我们要在打印时使用字体，那么我们只需要将字体下载下来，安装到计算机上并使用即可。

在博客等网页上使用也没有什么大区别，通常使用「引入外部 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 秒内可以加载完所有文件（清除缓存）。