字体压缩(字蛛font-spider)

2020-05-12  本文已影响0人  shine大臣

字体压缩(字蛛 font-spider)

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


1.安装依赖


安装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
上一篇下一篇

猜你喜欢

热点阅读