The use of font compression artifact font-spider

Foreword:

Many times the project will encounter the need to introduce external fonts, whether it is vue, applet, react, etc., but the pc-side project is fine, it is possible to put the source files locally, but the applet will not work, because the bodyThe amount is relatively small, and there is a limit to the size.

font-spider word spider official website address: it is best to have over the wall software, otherwise it is too slow, and there is a high probability of failure

font-spider.org - http://ww1.font-spider.org/

Specific use:

1. Install the plugin globally

npm install font-spider -g

2. Check if the installation is successful

font-spider -V

3. Open your directory and find the folder where your source files are located, such as mine

4. Create a new index.html,

Note that names such as LouisVuittonGlobal-Regular are replaced with your own source files

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

5. Right-click to open the cmd pop-up box, or the powershell pop-up box, and execute the command

font-spider index.html

6. You can see the following interface, the source file is 2M, and it is about 60k after compression. There are other formats that can be used

7. Beautiful, use it, import css:

@font-face {font-family: 'LouisVuittonGlobal-Regular';src: url("../fonts/LouisVuittonGlobal-Regular.ttf") format('truetype'); //mainly this sentencefont-weight: normal;font-style: normal;}