Introduction to the usage of node font compression plug-in font-spider

This article brings you an introduction to the usage of the node font compression plug-in font-spider. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Requirements:

1. According to Party A’s requirements, use the specified font in the UI

2. Default display system for mobile terminals Default fonts, non-system default fonts need to be imported into the font package yourself

3. The font package is too large, and the font package is usually several MB, which seriously slows down the page loading speed

Analysis:

1. The text content is fixed content and does not need to be updated

2. The text content is mostly commonly used text, and most of the text is not used

Plug-in:

font-spider
node 安装插件方法：npm install font-spider -g

Operation:

1. Install plug-in

2. Extract Project text:
   Create a temporary html and put all the text needed for the project into the html

3. Write the style code in htmlnl, for example:

    @font-face {
        font-family: 'myfont';
        src: url('./common/assets/font/myfont.ttf');
    }
    * {
        font-family: 'myfont';
    }

1. In the command prompt window, expand the directory to the directory where html is located, enter the command: font-spider *.html to change the fonts of all html in the directory Pull away and pack.

Note:

1. If the page text content needs to be updated frequently

2. If you need to update the input form If the content also uses customized fonts, please abandon the method described in this article. You can consider dynamically generating the font package through server-side rendering, or honestly introduce the complete font package into the page

The above is the detailed content of Introduction to the usage of node font compression plug-in font-spider. For more information, please follow other related articles on the PHP Chinese website!