对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:ProjectsmartPark 文字提取> npm init -y
Wrote to D:ProjectsmartPark 文字提取 package.json:
{"description": ""}
PS D:ProjectsmartPark 文字提取>

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

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

安装字符压缩工具模快 fontmin

cnpm install fontmin

结果

PS D:ProjectsmartPark 文字提取> cnpm install fontmin
√ Linked 243 latest versions fallback to D:ProjectsmartPark 文字提取 node_modules.storenode_modules
√ Linked 3 public hoist packages to D:ProjectsmartPark 文字提取 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:ProjectsmartPark 文字提取 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:ProjectsmartPark 文字提取
√ 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 {
  
  const fontFilePath = "./fontFile";
  const fontFileDir = fs.readdirSync(fontFilePath);
  
  const text="0123456789.% 路段办公楼寓餐厅管理中心人数入住率就餐";
  
  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]) 
    .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:ProjectsmartPark 文字提取> node app.js
已生成新的字体文件，可前往 https://gero3.github.io/facetype.js 转成 JSOO 格式

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

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