利用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;
}

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

 

THE END
喜欢就支持一下吧
抢沙发
头像
提交
头像

昵称

取消
昵称

    请登录后查看评论内容