压缩字体包的经验教程

最新推荐文章于 2025-01-13 14:54:51 发布

原创最新推荐文章于 2025-01-13 14:54:51 发布

· 1.1k 阅读

7 ·

版权

文章标签：

#前端

压缩微信小程序字体包的经验教程

最近在我的微信小程序项目中，我遇到了一个问题：由于使用了自定义的字体包，整个字体文件接近 5M，导致放在 OSS 存储中时产生了较高的成本。为了节省开支，我决定对字体包进行压缩处理。然而，由于项目已经上线，我目前只能继续使用 TTF 格式的字体包，但在下次上线时，我计划使用更小的字体格式（如 WOFF2）以进一步减少文件大小。

我会上传一个现代汉语常用3500字的txt文件。

问题背景

在小程序中使用自定义字体包是为了保持 UI 的一致性和美观性。然而，字体文件过大不仅增加了加载时间，还增加了存储成本。因此，我希望通过压缩字体文件的方式，在不影响用户体验的前提下减小文件大小。

解决方案：子集化字体

由于我们并不会在项目中使用所有的字体字符，我决定使用 字体子集化 技术来减少文件大小。这种方法可以提取出我们实际在项目中用到的字符，并生成一个子集字体文件，只保留所需字符。

工具选择：Fontmin

经过一番调研，我选择了 Fontmin 作为字体子集化工具。Fontmin 是一个基于 Node.js 的工具，可以轻松地提取并压缩字体文件。

步骤详解

安装 Node.js 和 Fontmin

首先，确保本地安装了 Node.js，然后全局安装 Fontmin：
```
npm install fontmin -g
```

创建字体子集化脚本

在项目目录下创建一个 fontmin.js 脚本，并编写如下代码：

const Fontmin = require('fontmin');
const fs = require('fs');

// 设置字体文件路径和输出路径
const fontPath = 'D:/path/to/your/font.ttf';  // 使用绝对路径
const outputPath = './output';  // 输出文件夹路径
const textFilePath = './unique_characters.txt';  // 提取出的字符文件路径

// 读取 unique_characters.txt 文件中的字符
const text = fs.readFileSync(textFilePath, 'utf8');

// 创建 Fontmin 实例
const fontmin = new Fontmin()
    .src(fontPath)  // 输入字体文件
    .use(Fontmin.glyph({ text }))  // 提取所需字符子集
    .dest(outputPath);  // 输出到指定文件夹

// 执行字体子集化
fontmin.run(function (err, files) {
    if (err) {
        console.error(err);
    } else {
        console.log('TTF 字体子集化成功！');
    }
});

执行脚本

在终端中运行该脚本：
```
node fontmin.js
```
这将会生成一个子集化的 TTF 字体文件，保存在 output 文件夹中。

遇到的问题及解决

中文路径问题：我遇到的一个问题是路径中包含中文字符时，Fontmin 无法正确处理。因此，建议在路径中尽量避免使用中文字符。如果必须使用，可以尝试将路径转换为绝对路径。
只能使用 TTF 格式：由于项目已上线，我只能暂时使用 TTF 格式，无法切换到更小的字体格式如 WOFF2。不过，计划在下次版本更新时，将字体格式转为 WOFF2 以进一步减小文件大小。