最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 引入第三方字体体积太大的问题

    正文概述 掘金(万表前端格仔衫)   2021-02-05   280

    引入第三方字体体积太大的问题

    背景

    在做营销活动的时候,设计稿这边使用了"思源"的字体。为了统一整个页面的字体风格,于是就把用到的字体引进来项目,但是最后发现字体大小竟然达到了 14MB,加载时间为3.74秒,可以预想到加载时间会进一步增长。如果用户还处于弱网环境下,这个等待时间是不能接受的。

    引入第三方字体体积太大的问题

    解决方法 - font-spider

    font-spider通过分析本地的CSS与HTML文件获取字体中没有使用的字符,并把这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。

    用法

    1. 全局安装
    npm i font-spider -g
    
    1. 新建一个项目

    项目里放入字体,字体一定是ttf格式,并使用css文件引入字体,并在html里引入

    引入第三方字体体积太大的问题

    index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="./index.css" />
        <style>
          .test {
            font-family: "SourceHanSerifCN-Light";
          }
        </style>
        <title>Document</title>
      </head>
      <body>
        <div class="test">
          表达爱有五种语言, 你是属于哪一种呢? click P2(引导页)
          你是不是总觉爱而不得? 在亲密关系理论里,爱有五种语言: A肯定言语
          B精心时刻 C接受礼物 D服务行动 E肢体接触
          如果你觉得自己做的对方总不领情,或者对方说爱你你却感觉不到,可能是你们爱的语言出现偏差,也即爱的方式不一致,你知道自己爱的语言吗?
          马上来测试 P3~P12(问题页,2道问题为1页)
          单选出新最合适的选项,别纠结,遵循内心第一选择。(每个问题页都有)
        </div>
      </body>
    </html>
    

    index.css

    @font-face {
      font-family: "SourceHanSerifCN-Light";
      src: url("./SourceHanSerifCN.ttf");
    }
    
    
    1. 终端使用命令压缩
    font-spider index.html
    
    1. 输出成功

    引入第三方字体体积太大的问题

    会发现会把10几兆的字体文件变成40多KB,因为他把多余的文字去掉了,只提取我们页面出现的那些文字。

    引入第三方字体体积太大的问题

    缺点

    font-slider虽然好用,但是由于其原理是直接分析本地 CSS 与 HTML 文件获取没有WebFont中没有使用过的字符,这样一来,对于动态生成的文字,就没有办法使用font-slider了.这是个坏消息!尤其在当下,很多框架都是数据驱动的,更是很多文字都不会直接出现html文件中.对于这种情况, 其他工具fontmin或许能解决.

    最后

    通过font-spider把页面上出现的文字处理了一次,体积和加载时间都缩短了很多。

    引入第三方字体体积太大的问题


    起源地 » 引入第三方字体体积太大的问题

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元