闽公网安备 35020302035485号
前端日常开发过程中,是否经常遇到这种痛点,交互设计使用了新的字体,新的字体文件往往几M或者几十兆,这对于前端包体积优化是不可接受的。本文我们将介绍两种从字体文件中抽取字体的方法:Fontmin 和 sfnttool.jar。两种方案都可以帮我们可以减小字体文件的体积,不影响网页加载速度。
const Fontmin = require('fontmin');
const fs = require('fs');
// 堆代码 duidaima.com
// 创建 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 -jar sfnttool.jar -s '我爱吃糖果!' path/to/font.ttf path/to/new-font.ttf执行完这个命令后,就会在指定的新路径下生成一个新的字体文件,其中只包含了我们指定的文字。
需要注意的是,执行jar包需要终端按装Java环境,这个很简单google一下就会了。