本文首发「前端大湿兄」公众号，欢迎关注，福利多多~
前端日常开发过程中，是否经常遇到这种痛点，交互设计使用了新的字体，新的字体文件往往几M或者几十兆，这对于前端包体积优化是不可接受的。本文我们将介绍两种从字体文件中抽取字体的方法：Fontmin 和 sfnttool.jar。两种方案都可以帮我们可以减小字体文件的体积，不影响网页加载速度。
node环境中使用Fontmin
Fontmin 是一个用于字体压缩和提取的 Node.js 模块，可以帮助我们从字体文件中提取指定的文字。下面是使用 Fontmin 进行字体提取的步骤：
- 安装 Node.js 环境和 Fontmin 模块。如果你不知道怎么安装，可以去问问你的程序员小哥哥或小姐姐。
- 创建一个 Fontmin 实例，并设置要提取的文字。这里我们可以设置一些有趣的文字，比如“我爱吃糖果！”。
- 调用 Fontmin 实例的
src()方法，指定要处理的字体文件路径。这里我们可以使用一些有趣的字体文件，比如“Comic Sans MS”。 - 调用 Fontmin 实例的
use()方法，添加 Fontmin 插件，用于处理字体文件。这里我们可以添加一些有趣的插件，比如“emoji”插件，让我们的字体文件更加有趣。 - 调用 Fontmin 实例的
run()方法，执行字体文件处理操作。 - 获取处理后的字体文件，就可以引入到项目中使用了。
示例代码：
const Fontmin = require('fontmin');
const fs = require('fs');
// 创建 Fontmin 实例
const fontmin = new Fontmin()
// 设置要提取的文字
.use(Fontmin.glyph({
text: '我爱吃糖果！'
}))
// 指定要处理的字体文件路径
.src('path/to/ComicSansMS.ttf')
// 添加 Fontmin 插件，用于处理字体文件
.use(Fontmin.emoji())
// 执行字体文件处理操作
.run(function (err, files) {
if (err) {
throw err;
}
// 获取处理后的字体文件，并将其保存到本地磁盘上
fs.writeFileSync('path/to/new-font.ttf', files[0].contents);
});
在上面的示例代码中，我们使用 Fontmin 提取了字体文件中的“我爱吃糖果！”这几个字。我们指定了要处理的字体文件路径，并添加了一些有趣的 Fontmin 插件，用于处理字体文件。最后，我们调用了 Fontmin 实例的 run() 方法，执行字体文件处理操作，并获取处理后的字体文件。
Java环境中使用sfnttool.jar
sfnttool.jar 是一个 Java开源字体提取库，可以帮助我们从字体文件中提取指定的文字。下面是使用 sfnttool.jar 进行字体提取的步骤：
- 下载 sfnttool.jar 文件。
- 打开命令行窗口，进入 sfnttool.jar 文件所在的目录。这里我们可以使用一些有趣的命令行工具，比如“cmatrix”工具，让我们的字体文件更加有趣。
- 运行以下命令，提取指定的文字：
java -jar sfnttool.jar -s '我爱吃糖果！' path/to/font.ttf path/to/new-font.ttf
执行完这个命令后，就会在指定的新路径下生成一个新的字体文件，其中只包含了我们指定的文字。
需要注意的是，执行jar包需要终端按装Java环境，这个很简单google一下就会了。
总结
本文给大家介绍了两种从字体文件中抽取字体的方法：Fontmin 和 sfnttool.jar。两个方案都非常简单，小伙伴准备好字体文件，按照步骤傻瓜式操作就ok了。最后对您有帮助的话点个关注呗~
本文由mdnice多平台发布
