ttf 字体包压缩优化

我司属于一家餐饮企业，经常有一些短期的小程序优惠活动，由于业务需要，一直都较多的按照切图的方式进行内容的展现，这种优点是能更形象生动展示活动风格，缺点就是大量的切图堆叠在页面上，需要做许多的定位适配，并且微信小程序有内存大小限制，只能把切图放到 OSS 线上访问，还要做 cdn 加速。上线前如果文案上有修改的地方还需要设计重新改图出图，从时间和资金成本上会投入比较多。所以我们打算调整一下思路，部分普通文案就由字体包进行进行系统生成，减少改图量，并且也减少图片的请求量，提高页面加载速度。

说干就干！！

通过小程序动态加载网络字体 (wx.loadFontFace) api 引入字体包

wx.loadFontFace({
  family: 'Bitstream Vera Serif Bold',
  source: 'url("https://sungd.github.io/Pacifico.ttf")',
  success: console.log
})

但是在这里我们遇到了一个问题，就是设计小姐姐提供的字体包源文件太大了，有接近 $\color{red}{10M}$ 左右，根本没法上线使用，得想个办法解决一下。

一、让设计小姐姐提供一个直接可用的字体包

结果：略

二、自己动手

让设计小姐姐提供一个可用字体包的建议，她们建议我们下次不要这么建议了 (捂脸笑哭.jpg) 。

1. nodejs方式

作为前端首先还是尝试用前端熟悉的js去处理。
$\color{red}{字蛛（font-spider）}$ 是一个智能 WebFont 压缩工具，它能自动分析出页面使用的 WebFont 并进行按需压缩

第一步：全局安装依赖

npm install font-spider -g

第二步：然后新建一个用于转换文本的 html 文件，把项目里有用到的文案粘贴进去

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @font-face {
      font-family: 'convert-font';
      /* src: url('./Alibaba-PuHuiTi-Bold.ttf') format('truetype'); */
      src: url('./Alibaba-PuHuiTi-Medium.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }

    .convert-font {
      font-family: 'convert-font';
    }
  </style>
</head>

<body>
  <div>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam quos minima autem animi quae itaque assumenda doloribus, similique dicta sequi, molestias tenetur quaerat qui suscipit ducimus labore, saepe debitis adipisci!
  </div>
  </br>
  <div class="convert-font">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis amet error quae perferendis eum repellendus
    necessitatibus quod, minus commodi? Quis eaque iusto distinctio libero eos architecto deserunt mollitia, aliquid
    tempora.

  </div>
</body>

</html>

第三步：在该项目文件夹内执行命令

font-spider index.html

执行完毕后文件夹内就会新增一个.font-spider 文件夹，这里面保存的是字体包源文件，外面的字体文件是经过压缩后的，我们可以看到基本都在 $\color{red}{ 30KB }$ 左右，有效的解决了字体加载问题

node转换文件夹内容.png

node转换后加载时间.png

注：1. 由于是基于node环境，各位非前端开发的小伙伴需要自行安装 node 环境，安装方法就不在这里赘述了 2. 该方法转换必须是html页面内的文本，ajax等方法导入的方式暂时无法转换

2. java方式

既然用前端的方法可以解决，那尝试一下用后端的方式是否也能解决。
跟后端大哥请教了一下，他提供了一个jar包，通过 java 命令行的方式提取文字，这里是 jar包文件链接，有需要的同学自行下载，提取码：9527。

java 的环境配置也不在这里过多赘述了，直接上命令行

java -jar sfnttool.jar -s 需要转换的文本 原始ttf文件名 转换后ttf文件名

例如

java -jar sfnttool.jar -s lorem.txt Alibaba-PuHuiTi-Medium.ttf medium.ttf

java转换后差异.png

可以看到 java 提取压缩的更狠，直接个位数的大小！果断选择 java 压缩后的版本。

3. transfonter方式

还有一款在线转换工具 transfonter

transfonter效果图.png 简单降解下使用步骤：

第一步：点击 "Add fonts" 按钮上传字体源文件
第二步：选择要转换的格式，例如 ttf
第三步：在 "Characters" 栏内粘贴目标文本内容
第四步：点击 "convert" 按钮等待转换结束导出转换后字体文件

该工具压缩程度与 java 差不多，作为在线工具会比前两种更简单上手，非开发人员也可操作

总结

这三种方式从最终的效果来讲在线工具是最好用的，不需要配置复杂的环境变量。如果开发人员的话我觉得 java 的方式是最有效率的，虽然作为前端开发人员，毕竟一行代码就解决的事谁不喜欢呢(手动狗头)。