background
The project uses Alibaba Pratt & Whitney 2.0 fonts, the models are 35-thin and 45-light respectively. These two font packages are about 8mb. When
loading locally, the speed may not be affected. When it is sent to the production and test environment, the speed It will be very slow, especially in the test environment, the font package will be loaded for a minute, and the font on the webpage will change after a minute, which is outrageous
optimization
Plug-in: font-spider, the scheme is used in all projects including vue react jquery, etc.
Talk about the font-spider principle first, because our own font package .ttf file contains all the text. The
function of font-spider is to help us convert the text we need into the font we want. For example, in the whole project, we only have
If you want to use the Alibaba Pratt & Whitney font for the three characters "鸡汤辉", font-spider will convert these three characters into the Alibaba Pratt & Whitney font and generate a new .ttf file, which means the character you want to convert The less, the smaller the resulting .ttf font file
Steps
1. Install font-spider dependencies
npm install font-spider -g
2. Create a new folder with whatever name you want. This folder needs to contain the font file you want to import. Ttf file, and then create a new css file in the folder such as font.css
@font-face {
font-family: 'AlibabaPuHuiTi-2-35-Thin';
src: url('./AlibabaPuHuiTi-2-35-Thin.ttf');
font-weight: normal;
font-style: normal;
}
.thin {
font-family: 'AlibabaPuHuiTi-2-35-Thin';
}
@font-face {
font-family: 'AlibabaPuHuiTi-2-45-Light';
src: url('./AlibabaPuHuiTi-2-45-Light.ttf');
font-weight: normal;
font-style: normal;
}
.light {
font-family: 'AlibabaPuHuiTi-2-45-Light';
}
The url here uses your uncompressed initialization.ttf file
3. Add a new html file (emphasis)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./font.css">
</head>
<body>
<div>
<!-- 这里对应的是thin的压缩包 -->
<div class="thin">
鸡汤辉
</div>
<!-- 这里对应的是light的压缩包 -->
<div class="light">
鸡汤辉
</div>
</div>
</body>
</html>
Introduce the newly added css file into the html file and then write two divs to use the two new classes in the css file respectively. The
text, characters, numbers and letters you enter in these two divs indicate that you need font-spider to help convert them into your The font you want, if you use text outside of these two divs in your project, then these texts that are not within the range will not use the font you want
For example: I wrote the three characters "鸡汤辉" in these two divs, then the final generated .ttf file can only recognize Jitanghui
and set Jitanghui to any other Chinese characters in the Alibaba Pratt & Whitney font Numbers, symbols, and letters are all fonts that come with the system
4. The last step, cd to your file package to use
font-spider index.html
The index.html here is your newly added html file, you can use whatever name you choose
Finally, this folder will generate a new .ttf file and a .font-spider folder. This .font-spider folder stores your uncompressed .ttf files. At this time, the
file location has been processed for you. Compress it The old ttf file will directly replace the original one, and your css file does not need to change the location of the referenced file, just use it directly
end
Tell me, I wrote 3500 commonly used Chinese characters, English letters, uppercase, lowercase, Chinese and English symbols in the html file div here, which can basically cover general items. If there are special symbols or uncommon words, they can be added separately, and finally compressed from 8mb to 900kb