前提

书接上文，在网上下载了宋体的ttf文件引入到项目里，解决了不同端不同浏览器中没有宋体样式不同意的问题，但是完整的ttf文件足足有10M，但是我们用到的汉字只有部分，所以就想到压缩一下，减轻项目体积。

上文(移动端页面 CSS 设置字体失效):juejin.cn/post/714834…

解决

找到了一个工具-- 字蛛（font-spider）

官网

github.com/aui/font-sp…
有中文文档写的很详细

安装

npm install font-spider -g
// 查看版本，判断是否安装成功
font-spider -V

使用

新建html文件,引入原字体ttf文件

// index.html
<style>
  @font-face {
    font-family: aaaa;
    src: url(./simsun.ttf);
    font-weight: normal;
  }
  .aaa {
    font-family: aaaa;
  }
</style>
...
<div class="aaa">2023|卯兔|壹月贰叁肆伍陆柒捌玖拾</div>

终端中运行

font-spider index.html

运行完后原本的ttf文件放置在自动创建的.font-spider文件夹中，而外部的ttf文件则是压缩后的，我这个压缩后的文件只有7k了，非常棒。

最后

把压缩后的文件复制到项目中引用就完成了，但是这种方案只能用在汉字是固定的情况，项目中还有另一个字体的使用是不确定的，还是只能老老实实使用原文件。不过也可以使用cdn，设置浏览器缓存等等方式减少加载时间。