# 如何为网页优化中文字体加载速度

> 本文公开全文。

原文：https://utgd.net/article/20873

在现代网页设计中，字体的选择和加载效率常常决定了用户体验的好坏。

🔗 原文链接

这篇文章介绍了一系列优化网站字体的方案，并深入探讨了如何通过优化字体加载速度来提升网页性能。

作者首先尝试直接引入 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 团队

---

[前往标准阅读页](https://utgd.net/article/20873?audience=web)