“This article is the first official account of "Front-end Dashie Brother". Welcome to pay attention, there are many benefits~ In the daily development process of front-end, do you often encounter this kind of pain point? New fonts are used in interactive design, and new font files are often several M or dozens of megabytes. , which is unacceptable for front-end package volume optimization. In this article we will introduce two methods for extracting fonts from font files: Fontmin and sfnttool.jar. Both solutions can help us reduce the size of font files without affecting web page loading speed.
”
Using Fontmin in node environment
Fontmin is a Node.js module for font compression and extraction, which can help us extract specified text from font files. Here are the steps for font extraction using Fontmin:
-
Install the Node.js environment and Fontmin module. If you don’t know how to install it, you can ask your programmer brother or sister. -
Create a Fontmin instance and set the text to be extracted. Here we can set some interesting text, such as "I love candy!". -
Calling the Fontmin instance src()method, specify the path of the font file to be processed. Here we can use some interesting font files, such as "Comic Sans MS". -
Calling the Fontmin instance use()method, add Fontmin plug-in for processing font files. Here we can add some interesting plug-ins, such as the "emoji" plug-in, to make our font files more interesting. -
Calling the Fontmin instance run()method, performs font file processing operations. -
After obtaining the processed font file, you can introduce it into the project for use.
Sample code:
const Fontmin = require('fontmin');
const fs = require('fs');
// 创建 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);
});
In the sample code above, we used Fontmin to extract the words "I love eating candy!" from the font file. We specified the path to the font files we want to process and added some interesting Fontmin plugins for processing font files. Finally, we called the run() method of the Fontmin instance to perform the font file processing operation and obtain the processed font file.
Using sfnttool.jar in Java environment
sfnttool.jar is a Java open source font extraction library that can help us extract specified text from font files. Here are the steps for font extraction using sfnttool.jar:
-
Download the sfnttool.jar file. -
Open a command line window and enter the directory where the sfnttool.jar file is located. Here we can use some interesting command line tools, such as the "cmatrix" tool, to make our font files more interesting. -
Run the following command to extract the specified text:
java -jar sfnttool.jar -s '我爱吃糖果！' path/to/font.ttf path/to/new-font.ttf
After executing this command, a new font file will be generated under the specified new path, which only contains the text we specified.
It should be noted that, executing the jar package requires the terminal to install the Java environment. This is very simple, just google it.
Summarize
This article introduces two methods for extracting fonts from font files: Fontmin and sfnttool.jar. Both solutions are very simple. Just prepare the font file and follow the steps to do it like a fool. Finally, if it helps you, please give me a follow~
This article is published by mdnice Multiple platforms