对ttf字体文件提取，用于压缩字体文件大小（nodejs）

前言

 在网页开发时，如果需要用到字体文件，那么在查找字体文件资源时可以看到一个字体文件动辄5到20多M，这对服务器带宽压力比较大。博主在编写threejs 3d 项目时由于需要在里面添加汉字，就遇到了这个问题。
 就如标题所说，我需要对原字体文件进行处理，只保留所用到的字符，以此来大幅度控制文件大小。注意！此功能实现依托于nodejs环境支持，你可以不懂node代码，但需要在你的电脑上安装node 官网下载地址https://nodejs.org/en/download

编写程序

设置文件夹结构

创建一个项目文件夹并创建fontFile子文件夹与app.js文件，使其结构就像这样

使用cmd 或者powershell 执行命令
在项目文件夹的文件路径框输入cmd 打开cmd 窗口或,shift + 右键 在根目录下打开powershell

初始化项目输入 npm init -y 回车

PS D:\Project\smartPark\文字提取> npm init -y
Wrote to D:\Project\smartPark\文字提取\package.json:
{
  "description": ""
}
PS D:\Project\smartPark\文字提取>

添加cnpm用于在国内访问npm源

npm install -g cnpm --registry=https://registry.npmmirror.com

安装字符压缩工具模快 fontmin

cnpm install fontmin

结果

PS D:\Project\smartPark\文字提取> cnpm install fontmin
√ Linked 243 latest versions fallback to D:\Project\smartPark\文字提取\node_modules\.store\node_modules
√ Linked 3 public hoist packages to D:\Project\smartPark\文字提取\node_modules
deprecate fontmin@1.0.1 › buffer-to-vinyl@1.1.0 › uuid@^2.0.1 Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
deprecate fontmin@1.0.1 › vinyl-fs@3.0.3 › glob-stream@6.1.0 › unique-stream@2.3.1 › through2-filter@^3.0.0 this package has been deprecated for breaking semver major
deprecate fontmin@1.0.1 › ttf2woff2@4.0.5 › node-gyp@9.4.1 › make-fetch-happen@10.2.1 › cacache@16.1.3 › @npmcli/move-file@^2.0.0 This functionality has been moved to @npmcli/fs
Recently updated (since 2024-05-04): 1 packages (detail see file D:\Project\smartPark\文字提取\node_modules\.recently_updates.txt)
  2024-05-10
    → fontmin@1.0.1 › meow@10.1.5 › normalize-package-data@3.0.3 › semver@^7.3.4(7.6.2) (00:02:50)
√ Run 1 script(s) in 2s.
√ Installed 1 packages on D:\Project\smartPark\文字提取
√ All packages installed (261 packages installed from npm registry, used 16s(network 15s), speed 327.75KB/s, json 86(1.18MB), tarball 3.75MB, manifests cache hit 157, etag hit 157 / miss 46)

dependencies:
+ fontmin ^1.0.1

在app.js中编写代码

const Fontmin = require("fontmin");
const fs = require("fs");
try {
  //指定读取文件夹fontFile
  const fontFilePath = "./fontFile";
  const fontFileDir = fs.readdirSync(fontFilePath);
  // 填写需要提取的字符，字符不要重复
  const text="0123456789.%路段办公楼寓餐厅管理中心人数入住率就餐";
  // 只拿取ttf文件
  const fonts = fontFileDir.filter((fd) => {
    let fileType = fd.split("."); 
    fileType = fileType[fileType.length - 1];
    return fileType == "ttf";
  });
  if (fonts.length < 1) throw "无可用.ttf字体文件";

  const fontmin = new Fontmin()
    .src(fontFilePath + "/" + fonts[0]) // 指定要处理的字体文件，只拿取fontFile文件夹中的第一个字体文件
    .use(
      Fontmin.glyph({
        text,
      })
    ) 
    .dest("./output"); // 指定输出目录

  fontmin.run(function (err, files) {
    if (err) {
      throw err;
    } else {
      console.log("已生成新的字体文件，可前往 https://gero3.github.io/facetype.js 转成JSON格式");
    }
  });
} catch (err) {
  console.error(err);
}

将要提取的ttf字体文件放到fontFile文件夹中

执行运行命令

node app

结果

PS D:\Project\smartPark\文字提取> node app.js
已生成新的字体文件，可前往 https://gero3.github.io/facetype.js 转成JSOO格式

在outPut文件夹中查看生成的只包含特定字符的新字体文件，仅有7kb !

如果你和博主一样需要在three.js 3d 项目添加中文等特殊字符，你还需要将其转为JSON格式
可以通过https://gero3.github.io/facetype.js/进行在线转换