美文网首页
字体压缩(字蛛font-spider)

字体压缩(字蛛font-spider)

作者: shine大臣 | 来源:发表于2020-05-12 12:54 被阅读0次

    字体压缩(字蛛 font-spider)

    在我们的网页中为了使页面好看会用到各种各样的字体,但是每种字体就用了短短的几句话而要引入整个字体文件实在是不太好,占用空间资源不说,那网络加载更是让人头疼,下面我来介绍一种方法,压缩字体文件


    1.安装依赖

    • nodejs
    • font-spider

    安装font-spider

        npm install font-spider -g
    

    写一个demo.html用来展示

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>压缩字体</title>
      <style>
        @font-face {
          font-family: 'Source';
          src: url('Source.TTF');
          src:
            url('Source.eot?#font-spider') format('embedded-opentype'),
            url('Source.woff') format('woff'),
            url('Source.ttf') format('truetype'),
            url('Source.svg') format('svg');
          font-weight: normal;
          font-style: normal;
        }
    
        .fontyasuo {
          font-family: 'Source';
        }
      </style>
    </head>
    
    <body>
      <p class="fontyasuo">测试字体压缩</p>
    </body>
    
    </html>
    

    注意:字体压缩后的字体文件中只有你在上面用到过的文字,故在使用过程中整理清楚都是用到了哪些文字

    最后执行

     font-spider ./demo.html
    

    相关文章

      网友评论

          本文标题:字体压缩(字蛛font-spider)

          本文链接:https://www.haomeiwen.com/subject/xhqbnhtx.html