Question:

Now many projects require the introduction of fonts, but because the introduction of too large fonts will inevitably lead to the size of the project is too large, a random font will be a few or ten megabytes, for direct introduction is not possible.

Solutions:

I believe that those who have this idea will go to Baidu to answer, you will know a plug-in called spider, he can extract the font we need from the font library, so as to greatly reduce the size of the font.

Specific steps:

  1. Global installation

npm install font-spider -g

  1. Define fonts and use them
@font-face {
    font-family: "pinghei";
    src: url("./font/ TTF");
    font-weight: normal;
    font-style: normal;
}

div {
    font-family: "pinghei";
}
Copy the code

  1. By storing 3,500 commonly used Chinese characters and extracting them through spiders, the 3,500 fonts can contain 99% of Chinese characters

  2. Execute font-spider./test. HTML to separate fonts successfully

  3. You’ll notice that the font has changed from 10M to 700+ K

The last

If you find this article helpful in your search for a solution, please give it a thumbs up. Your thumbs up will keep me going