近期有个项目,我的设计稿中用到了一些宋体,但是作为移动端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大小