栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Python

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

Python 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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

安装node和python

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

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

压缩不要用vue等一些框架

就用最基本的html就行

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




    
    
    
    document
    
        @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中的文字为

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

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


那么页就不显示了

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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/529946.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号