• 网站使用自定义字体导致打开很慢


    今天偶尔看到一个网页打开首页一分钟竟然还没有出来!!!

    这还了得,做IT就是强迫症多,非得看看是什么原因,不用说F12跑一圈!!

    查找原因,是ttf字体库导致的,一看14M,OMG!!

    继续查看源代码分析如下:

    百度google,终于发现了一好办法【字蛛】,感觉不错,文件可以瞬间小很多,其实原理我觉得很简单,英文就26个字母,中国汉字那么多,字体文件肯定 会很大,

    -------------------------------华丽的分割线————————————————————

    【字蛛】只不过是把你页面上要用的汉字都给提取出来重新生成一个新的字体文件,显然会很小,废话不多说,接下来上步骤:
    1、【安装nodeJs】
    这步我就不多说了,不是本文的重点,大家可以找度娘,一堆
    这里要注意的事需要用到npm安装,
    用淘宝镜像,命令如下:

    首先打开nodejs客户端

    输入一下命令:

    npm config set registry http://registry.npm.taobao.org

    npm info underscore (如果上面配置正确这个命令会有字符串response)

    命令行指定
    npm –registry http://registry.cnpmjs.org info underscore

    这样一来速度会快很多了

    2、【安装字蛛】
    输入命令
    npm install font-spider -g
    会看到一堆警告,没关系,到最后会出现如下显示

    说明成功了

    3、【运行】
    安装成功之后就开始压缩了

    我的目录是这样的

    我的css文件是开头是这样的

    这里要确保ttf文件一定要有,其他的不管

    在你的html中也引用了相应的css文件

    接下来就是最后一步了 生成新的字体库

    nodejs 命令行输入
    font-spider C:UserswangchaoDesktopindex*.html
    也就是你的html完整路径 【*】 是通配符,表示会扫描所有的html文件
    然后回车

    这样就成功了,在你原来的字体文件目录下会多出相应的压缩之后的字体文件,发现小了很多吧
    然后你再引用相关的新的字体文件就行了。个别内容来自互联网

  • 相关阅读:
    laydate 时间框弹窗点击弹出后立马消失的问题解决
    万字长文:ELK(V7)部署与架构分析
    人声消除的原理算法源码及方案实现
    主动降噪技术(ANC)的前生今世–行业分析
    主动降噪技术(ANC)的前生今世--原理仿真
    主动降噪技术(ANC)的前生今世--概念历史
    音频人生
    解决 Flask-sqlalchemy 中文乱码
    使用 key 登录时分开记录操作历史记录
    OpenSSH 使用技巧
  • 原文地址:https://www.cnblogs.com/lovebing/p/6257654.html
Copyright © 2020-2023  润新知