我们采用的方案与这篇文章类似，此前写过一篇 《如何给中文网站添加更快更好看的中文字体？》 ，其中就提到了中文网字计划提供的分字方案。
如果你也希望给自己的网站用上一套独特的字体，可以参考这篇原文，它提供了一整套切实可行的操作方案。
在现代网页设计中，字体的选择和加载效率常常决定了用户体验的好坏。
这篇文章介绍了一系列优化网站字体的方案，并深入探讨了如何通过优化字体加载速度来提升网页性能。
作者首先尝试直接引入 MiSans 的 woff2 格式完整字体，但发现这样导致首次绘制时间（FCP）高达 3 秒，这促使他进一步探索优化方案。
为了应对这个问题，作者借助了字体子集化的技术。通过使用 npm 工具 subset-font，他成功地将原始的 4.9 MB 的字体文件缩小到仅 1,668 字节（约 4 KB），显著减少了字体加载时间。这一过程中，他详细描述了如何提取出仅包含网页所需字符的子集，并展示了这项优化对网页加载性能的积极影响。
但由于网页内容的动态性，作者发现单靠字体子集化难以应对所有场景。
需要注意的是，字体子集化只适用于那些确切知道页面上将使用哪些字符的情况。如果页面上的文本是动态生成的或者包含用户输入，字体子集化可能不适用，因为无法确定需要哪些字符。
于是，他进一步探索了“字体分包”技术，这一技术的灵感来自于 Google Fonts 的切片字体方案。
Google Fonts 的团队曾通过分析大量日语网页，开发出了一种按字符使用频率分割字体的方法，将 29,415 个字符分为 86 个小包，每个包大小不超过 70 KB。作者使用类似的方法将 MiSans 字体进行了切片处理，最终生成了多个小型字体包，大大提高了网页的加载效率。
此外，作者还分享了一些实用工具和方法，例如在线字体分包器（似乎已经失效）和 cn-font-split，这些工具不仅使字体分割更加容易，还可以针对不同的网页内容灵活调整字体包的大小和字符集。
在实操过程中，作者展示了如何通过 CDN 部署这些优化后的字体，并以实际案例说明了优化效果。
对于那些对网页性能有高要求的开发者来说，这种将字体优化与 CDN 部署相结合的方式值得一试。通过合理的字体优化手段，网页的加载速度得到了显著提升，尤其是在加载中文字体时，效果尤为明显。
“在当前的网页开发中，如何在不影响用户体验的情况下，提高字体加载速度是一个值得深思的问题。”——Google Fonts 团队