background

In the marketing campaign, I used the font “Si Yuan” on the design side. In order to unify the font style of the entire page, we introduced the font to the project, but we found that the font size reached 14MB and the loading time was 3.74 seconds, which can be expected to increase further. If the user is in a weak network environment, this wait time is unacceptable.

Font -spider

The Font-spider analyzes local CSS and HTML files to get unused characters from fonts, removes the character data from the fonts for compression, and generates cross-browser formats.

usage

  1. Global installation
npm i font-spider -g
Copy the code
  1. Create a new project

Put the font in the project, the font must be IN TTF format, and use CSS file to import the font, and in HTML

index.html

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <link rel="stylesheet" href="./index.css" />
    <style>
      .test {
        font-family: "SourceHanSerifCN-Light";
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div class="test">There are five languages to express love, which one do you belong to? Are you incapable of loving? In intimate relationship theory, there are five love languages: A certain words carefully point B C D accepting gifts service action E physical contact If you think you do each other always ungrateful, or the other said love you, but you don't feel may skew the language of love is you, that is love the way, do you know the language of love? Now come to test P3-P12 (question page, 2 questions for 1 page) radio select the most appropriate option, don't worry, follow your heart first choice. (On each question page)</div>
  </body>
</html>
Copy the code

index.css

@font-face {
  font-family: "SourceHanSerifCN-Light";
  src: url("./SourceHanSerifCN.ttf");
}

Copy the code
  1. The terminal uses command compression
font-spider index.html
Copy the code
  1. The output is successful

You’ll find that it turns 10 megabytes of font files into 40 kilobytes because it removes the extra text and only extracts the text that appears on our pages.

disadvantages

Font-slider is useful, but because it works by analyzing native CSS and HTML files to get characters that aren’t already in WebFont, it’s impossible to use font-slider for dynamically generated text. That’s bad news! Especially today, a lot of frameworks are data-driven, and a lot of text doesn’t appear directly in HTML files. In this case, another tool, Fontmin, might work.

The last

Using a font-spider to process the text that appears on the page, the volume and load time are greatly reduced.