PingFang字体库压缩
2022-03-22 本文已影响0人
姜治宇
PingFang下载地址
链接：https://pan.baidu.com/s/1-KXczudWpmvi5rbx5n07aQ
提取码：fnig
压缩字体
字体库如果不压缩，会严重拖累网页加载速度。
1、安装font-spider
npm install font-spider -g
2、打开cmd，运行命令
D:\> font-spider index.html
index.html：
<!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="./css/layout.css">
</head>
<body>
...
</body>
</html>
layout.css:
@font-face {
font-family: 'PingFang SC';
src: url('../fonts/PingFang-SC-Regular.ttf');
}
body{
padding:0;
margin:0;
font-family: 'PingFang SC';
}
...
3、压缩完成
在fonts文件夹会多一个压缩过的ttf文件，替换掉原来的大文件即可。
4、注意
1）一定要压缩ttf文件，otf无效
2）一定要在项目完成后压缩字体，因为系统会检测网页所有文字用到的字体，剔除掉不用的。
3）js动态写入的文字无效
4）vue等框架可以选择webpack插件的方式达到同样效果
