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

437 阅读3分钟

前端日常开发过程中,是否经常遇到这种痛点,交互设计使用了新的字体,新的字体文件往往几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了。最后对您有帮助的话点个关注呗~