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

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

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

安装node和python

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

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

压缩不要用vue等一些框架

就用最基本的html就行

在font中放入下载好的字体包，只要.ttf就行

    
    
    
    
    
        @font-face {
            font-family: 'YouSheBiaoTiHei';  //注意字体引用的路径
            src: url('font/YouSheBiaoTiHei.ttf');
            font-weight: normal;
            font-style: normal;
        }
    



    
        我试一下随便打大声道啊发顺丰安分三份啊发顺丰阿发中表现出不拘束的鳄鱼肉的首付款本仙女们
    

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

其实这个.html是包含了index文件夹下所有的html，在现在这个文件夹下只有index.html一个，所以把*。html改成index.html也行

可以看到体积变小了，.font-spider文件夹下打开就是原来字体包的大小

坑来了，新得到的包的大小是根据字的多少而压缩来的

这也是为什么有时候你压缩完了，那到项目里用去了，但是字体并没有发生改变

简单来说就是，这个字体包之所以压缩这么小，是因为它在压缩过程中只挑选了你需要的，而不需要的被舍弃了

比如我上面的index.html中的文字为

我试一下随便打大声道啊发顺丰安分三份啊发顺丰阿发中表现出不拘束的鳄鱼肉的首付款本仙女们

那么压缩后的字体包就只包含这些
而使用中如果字为

页
那么页就不显示了

所以这个方法也只是用较少的字来变更字体，如果字过多，体积也会变大，这是肯定的