Problem description
Sometimes we need to use some beautiful fonts to optimize the text for the aesthetic of the project. However, a font file is usually several MB, the file is too large, packaging and put into the production environment, obviously will waste traffic bandwidth, resulting in a long website request time, this is definitely not acceptable. So we need to do font compression.
The reason for the large font file is the large number of Chinese characters. It is said that the total number of Chinese characters is nearly 10 characters.
Font compression
The idea of font compression is to separate out the text that needs to be used in the project and discard the text that is not needed, which is equivalent to introducing it on demand. After all, when we use fancy fonts, we don’t use a lot of words. Usually a dozen, a few dozen at most.
Fontmin usage steps
You can do it in code, NPM I fontmin-g
You can also use the client side directly for compression
Client-side compression is recommended
Step 1: Download the client
Go directly to download website, website with the client to download the entry, website include: ecomfe. Making. IO # / fontmin/ba…
Step two, install and use
Install a little… Use the following figure:
Third, generate a good compressed file
As you can see, files are generated in a variety of formats, and I usually just use.ttf files.
Step 4: Use the compressed font in your project.
From over 4 megabytes, compressed to over 20 KB, which is barely acceptable, can be used in a production environment…
Personally, I find it more convenient to use compression directly from the client than to write code. Of course, you can write code to control it, so it’s a matter of personal preference. Overall, this plugin is a good choice for compressing fonts. ❤ Recommend ❤