前端引入字体加载过慢踩坑

包括环境，安装工具，以及压缩后引用不生效的坑，记录一下安装node和python官网：https://www.python.org/配置好环境变量：参考文章：https://www.cnblogs.com/gu-bin/p/11045043.html注意，这个校验版本有没有安装好的时候，要用cmd，不要用那个powershell...

枫林晚风起

2708人浏览 · 2021-11-17 17:25:19

枫林晚风起 · 2021-11-17 17:25:19 发布

包括环境，安装工具，以及压缩后引用不生效的坑，记录一下

安装node和python

官网：https://www.python.org/
配置好环境变量：
参考文章：https://www.cnblogs.com/gu-bin/p/11045043.html

注意，这个校验版本有没有安装好的时候，要用cmd，不要用那个powershell

压缩不要用vue等一些框架

就用最基本的html就行
在这里插入图片描述
在font中放入下载好的字体包，只要.ttf就行

npm install  font-spider -g

全局下载 font-spider

<!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>
    <style>
        @font-face {
            font-family: 'YouSheBiaoTiHei';  //注意字体引用的路径
            src: url('font/YouSheBiaoTiHei.ttf');
            font-weight: normal;
            font-style: normal;
        }
    </style>
</head>

<body>
    <div style="font-family:YouSheBiaoTiHei;">
        我试一下随便打大声道啊发顺丰安分三份啊发顺丰阿发中表现出不拘束的鳄鱼肉的首付款本仙女们
    </div>
</body>
</html>

html中随便写点啥都行
然后再此处打开cmd,输入font-spider .html

其实这个.html是包含了index文件夹下所有的html，在现在这个文件夹下只有index.html一个，所以把*。html改成index.html也行
在这里插入图片描述
可以看到体积变小了，.font-spider文件夹下打开就是原来字体包的大小