前端日常开发过程中,是否经常遇到这种痛点,交互设计使用了新的字体,新的字体文件往往几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一下就会了。