前言
在网页开发时，如果需要用到字体文件，那么在查找字体文件资源时可以看到一个字体文件动辄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/进行在线转换
