利用CN-Font-Split项目给中文字体分包

前言

之前的文章介绍了如何给WordPress添加自定义字体，今天教大家如何使用CN-Font-Split给中文字体进行分片

介绍

cn-font-split 是 中文网字计划 所使用的字体分包工具，通过高性能的各种技术将庞大的字体包拆分为适合网络分发的版本。经过四个版本的字体研究与代码迭代，这项技术在我们的网站中得到了充分的应用，实现了中文字体在 Web 领域的加载速度与效率的双飞跃。

项目地址

gitcode：https://gitcode.com/KonghaYao/cn-font-split

github：https://github.com/KonghaYao/cn-font-split

教程

1.首先去nodejs官网下载大于18版本的安装包，这里我下载的是19.9.0

2.其次就是打开安装包进行安装。

3.打开CMD输入以下代码安装项目

npm install @konghayao/cn-font-split
npm install @konghayao/cn-font-split -g # 如果使用命令行，推荐全局安装

4.继续输入以下命令进行分包

cn-font-split -i=../demo/public/SmileySans-Oblique.ttf -o=./temp

其中../demo/public/SmileySans-Oblique.ttf 可以替换成你字体的具体路径，./temp 替换成你想要分包出的文件的路径。

5.上传到网站的某个文件夹里。

6.调用方式：主题后台的页头代码或Head的html代码中添加如下代码

<link rel="stylesheet" href="https://你的域名/字体文件夹/result.css" />

7.查看result.css 文件中font-family 后面的文字就是你字体的名字。

8.在主题自定义css或子主题的css文件中添加如下代码

body {
    font-family: "字体名字", sans-serif;
}

这样就完成了字体的分包和调用。