Skip to content

「中文网字计划」:中文站点使用网页字体的不二选择

Posted on:2023年11月7日 at 22:16

前言

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

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

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



在 Rickyxrc's blog 出现的文章,若无特殊注明,均采用 CC BY-NC-SA 4.0 协议共享,也就是转载时需要注明本文章的地址,并且引用本文章的文章也要使用相同的方式共享。