近期有个项目，我的设计稿中用到了一些宋体，但是作为移动端H5页面大多都只有系统默认的字体，偏黑体更多一些。但是纯黑体表现的更多是简洁、严肃、理性。但是如果想表达更加感性的东西时，我们可能更多的是需要宋体来突出文化底蕴。

虽然文字比较少，但是使用图片的方法一个是体积太大，一个是不容易编辑，再一个就是不清晰。

我这里使用的是font-spider来进行字体压缩。在此之前我也测试了一波fontmin等，很多都是兼容性较差，上古软件不适配新版字体。所以这个文章的方法是我目前用起来可用性最高的。

让第三方字体仅包含用到的文字，可以有效减少引入的字体大小。

安装font-spider

使用终端（或者cmd）输入下面的代码回车

1
npm install font-spider -g

创建一个html文件

首先我们创建一个文件夹，里面要包含

  • 一个空白html文件index.html
  • 一个字体文件font.ttf

html文件中我们插入下面的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<p>每日打卡活动须知赞助商积分排名精彩投稿领奖机构</p>

<style> 
@font-face {
  font-family: 'HeoFont';
  src: url('./font.ttf');
  font-weight: normal;
  font-style: normal;
}

p {
    font-family: 'HeoFont';
}
</style>

其中p标签内插入你需要的文本

执行压缩

从终端（或者cmd）中cd进入此文件夹，输入font-spider index.html

成功样式

然后就可以在文件夹中看到你的ttf字体就是压缩之后的了！

转换为woff2

woff2是一个压缩的字体，可以有效减少字体体积。

陶小桃分享了一个转格式网站：https://cloudconvert.com/ttf-converter

ttf转格式woff2

字体文件可以发给前端小伙伴直接用起来了！

参考文献

给你的 npm 提提速 — 优化国内 npm 下载速度

前端性能优化，如何给字体大瘦身！

字体文件太大怎么办？使用Python库fonttools大幅度压缩字体的大小，实现字体几百KB大小