前端开发实践：如何快速提取字体文件中的文字？

本文首发「前端大湿兄」公众号，欢迎关注，福利多多~
前端日常开发过程中，是否经常遇到这种痛点，交互设计使用了新的字体，新的字体文件往往几M或者几十兆，这对于前端包体积优化是不可接受的。本文我们将介绍两种从字体文件中抽取字体的方法：Fontmin 和 sfnttool.jar。两种方案都可以帮我们可以减小字体文件的体积，不影响网页加载速度。

node环境中使用Fontmin

Fontmin 是一个用于字体压缩和提取的 Node.js 模块，可以帮助我们从字体文件中提取指定的文字。下面是使用 Fontmin 进行字体提取的步骤：

1. 安装 Node.js 环境和 Fontmin 模块。如果你不知道怎么安装，可以去问问你的程序员小哥哥或小姐姐。
2. 创建一个 Fontmin 实例，并设置要提取的文字。这里我们可以设置一些有趣的文字，比如“我爱吃糖果！”。
3. 调用 Fontmin 实例的 src() 方法，指定要处理的字体文件路径。这里我们可以使用一些有趣的字体文件，比如“Comic Sans MS”。
4. 调用 Fontmin 实例的 use() 方法，添加 Fontmin 插件，用于处理字体文件。这里我们可以添加一些有趣的插件，比如“emoji”插件，让我们的字体文件更加有趣。
5. 调用 Fontmin 实例的 run() 方法，执行字体文件处理操作。
6. 获取处理后的字体文件，就可以引入到项目中使用了。

示例代码：

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 进行字体提取的步骤：

1. 下载 sfnttool.jar 文件。
2. 打开命令行窗口，进入 sfnttool.jar 文件所在的目录。这里我们可以使用一些有趣的命令行工具，比如“cmatrix”工具，让我们的字体文件更加有趣。
3. 运行以下命令，提取指定的文字：

java -jar sfnttool.jar -s '我爱吃糖果！' path/to/font.ttf path/to/new-font.ttf

执行完这个命令后，就会在指定的新路径下生成一个新的字体文件，其中只包含了我们指定的文字。

需要注意的是，执行jar包需要终端按装Java环境，这个很简单google一下就会了。

总结

本文给大家介绍了两种从字体文件中抽取字体的方法：Fontmin 和 sfnttool.jar。两个方案都非常简单，小伙伴准备好字体文件，按照步骤傻瓜式操作就ok了。最后对您有帮助的话点个关注呗~

本文由mdnice多平台发布