中文网字计划是收录众多中文字体并通过 Web Font的形式为网站开发者提供美丽字体的项目。

? 中文网字计划

中文网字计划致力于在互联网中提供更加便捷实用的全字符集中文渲染方案。中文网字计划通过精巧设计的字体分包方式，将庞大的字体文件切割为多个小型静态分包部署于云端，在全网领域内都可快捷、稳定地进行加载。我们为提高中文字体在网络中的流通体验而努力！

? 为何在网络中大量使用独特的中文字体？

? 提高艺术风格的表现力

前端领域是信息呈现最为丰富、风格最为灵活的一个技术领域。它不仅包括了各种以文本为主的新闻、博客、论坛网站，还涵盖了各类生动灵活的数据可视化网站，以及风格别致的网页小游戏。在许多注重表现细节网站中，中文字体的作用不容小觑。例如在像素游戏使用像素字体来符合整个游戏世界观，数据可视化网站中运用特殊装饰字体来呈现主题所表达的情感，在个人博客中也有运用飘逸轻盈的字体来展现个人的艺术追求的例子。可以说，选择适合的字体是使得网页呈现独特风格的关键要素之一。

对于我们这些码农来说，代码是最为基础的原料，而我们想去构筑的、生产的、让人记住的，却会是上面这些更为情感化的产物。

? 提高产品的风格辨识度和国际统一度

中文字体能够有效地呈现品牌形象，提高产品的辨识度，帮助产品更好地传递自己的理念和价值观。中文字体在不同的设计元素中也有着其独特的应用。

举例来说，米哈游开发的原神中采用 汉仪文黑字体，它在中、日、韩、英四种语言环境下表现出一致的艺术风格和文字表现力。即使在同一图片中呈现也没有违和感，这对于不同语言玩家在游戏中的视觉效果和用户体验来说具有非常强烈的提升。

对于中国的古籍文本而言，美感完整地呈现在文字中。如果运用一款风格优美的古文字体，可以使得诗词歌赋的意境尽显。例如，在网站 “中华诗词大典” 中，采用了汇文明朝体作为主题文字。这种文字体采用古体写法配合以 “拓片” 的 UI 风格，可以让文本以更为独特的方式呈现出来，从而更好地展现古代文学的精髓。

? 如何实现网络字体加速？

在当前的互联网环境中，英文字体的应用已经非常普遍。由于英文字符数量较少，因此加载整个字体包并不会对网页造成影响。然而，中文字符与英文字符相比，其数量和轮廓复杂度都更高，因此加载中文字体往往会占用大量的网络带宽。对于原生应用程序来说，可以通过内置字体包等方式解决这个问题，但这个弱点对于网页加载则是致命的。

目前一种在网页中使用中文字体的方法是分析网页所包含的中文字符，将字体切割出来，单独分包存储在服务器中。这种切割方式可以极大地减小字体大小对带宽的影响，适用于个人博客等类型的网站。然而，随着一个项目越来越大，所需要进行的切割文本越来越多，采用这种非全量级的加载方式，可能会导致不同的文章涉及的文字不同，从而造成打包字符区间不同，影响服务器的缓存和资源利用率。

在 Google Fonts 网站中，Google 采用最新的 CSS 特性 unicode-range 来实现按需加载 CJK （中日韩） 字体，并成功地实现了中文字体在网页端的全量级按需加载。同时提供了如站酷系列、Noto 系列等字体的效果展示。从技术上看，所有加载文件为静态文件，可以通过 CDN 一次发布，随处加载，且具有可靠的速度和稳定性。即使如博客论坛等专注文本类型的网站，也可使用。

中文网字计划在 Google Fonts 的切割方案的基础之上，对字体的使用顺序进行了排序分类，优化各类字符的分包区间，并使用更加快速的全球 CDN 服务，实现了近乎完美的中文字符落地方案。同时，计划中所开源的的开发工具流已经可以无缝融入前端开发，为中文字体在网络中的使用提供理论和技术上的支持。

? 中文网字计划的艰辛开发过程

中文网字计划的艰辛从初期的技术调研开始，我查看了大量关于中文字体加载的方案和 Google Fonts、FontSource 网站中的技术，学习了他们的设计方法并有了一些自己的想法。我策划着使用现有技术，打造一款中文字体的切割工具，并利用这个工具和其他免费商用字体，为我的网站作品营造出绝妙的设计效果。随后，我在 Github 上开始了第一行代码 ?。几天之后，cn-font-split 完成了。

然而，既然我们有了一个这么好的工具，又何必不多开发几款呢？? 于是，我建立了一个字体分包成品的仓库，将收集到的免费商用字体做了完善的分包，并将它们放置到自己的 CDN 中，作为一个中心化管理程序，并通过自己开发的前端页面呈现出来，真是太棒了！

再后来，我想顺便学习一下网页性能优化，就把首页当作试炼场。这段实践经历把中文网字计划的官网的 LightHouse 指标弄到全优，确认了我的方向是对的，这种网络字体的使用方式是完全可行的，而且性能还不错 ?。

随后，我接触到了 Web Worker 多线程和 WebAssembly 带给 JS 的强大的性能力量。虽然我不懂 C++ 和 Rust 等其它语言，但是通过 Github 社区的力量，我试着去重构了其打包逻辑和 Javascript 外层，使得其兼容性得以提升。同时，我学习了 Web Worker 的多线程编程经验，将重计算的慢速压缩的逻辑分配到了各个核心上，使得整个 cn-font-split 工具的效率提升了一倍！

现在，我正记录着这一切，希望留下我的经验、回归技术的本质、继续优化网字的效果。虽然我不知道我的下一个作品是什么，但是我相信，中文网字计划的经历让我更上一层楼，我的辛苦并未白费。??

⌨️ 相关技术资源

? @konghayao/cn-font-split

@konghayao/cn-font-split 是一个基于 Node.js 的字体分包器，能够将来源字体文件分成多个包，并且提供附带成果预览和数据分析功能 ?。中文网字体计划使用 @konghayao/cn-font-split 作为核心，构建了一系列字体的分包成品。如果您需要对私有字体进行简单分包和静态部署，选择它再适合不过了。

? 中文网字计划字体仓库

中文网字计划已经通过部署免费商用字体分包进行了字体实战效果测试，在中文网字计划首页你可以看到很多已经投入实际实用的字体文件，在每个详细字体页面还可以查看到相应的字体数据分析！

✒️ 中文网字计划前端项目

中文网字计划前端通过构建页面来展示字体仓库中的数据，并提供字体实战效果。此外，我们还计划开设一个专门展示开源成果文章的栏目，以帮助用户更深入地了解字体、设计和前端技术。这个前端项目不仅仅是一个数据展示平台，更是一个汇聚资源的社区，为广大字体爱好者和前端从业者提供技术互动。

? 字体管理系统

字体管理系统是一个适用于中大型项目中的字体管理、分包和部署的后端程序。它可以对字体文件进行自动化管理，帮助开发者更加高效地进行字体相关的工作。你可以在可视化界面中上传字体文件，点击一个按钮即可实现自动切割并上传至私有云中部署字体，快捷又方便。

? 在线字体分包器

@konghayao/cn-font-split 经过神奇的代码重构，使得其可以运行在任何标准的 Nodejs 或者是 Web 环境中。这意味着几乎所有现代浏览器都可以直接在线分包字体，只想要分一次包的开发者不需要写任何代码即可分包。

? 在线字体分析器

在线字体分析器是正在进行开发的项目，期望实现在网页端可以查看字体的具体情况，分析字符覆盖率等功能。

网址预览