字体文件压缩 - font-spider (字蛛)

最新推荐文章于 2024-09-21 21:55:40 发布

BILYHO

最新推荐文章于 2024-09-21 21:55:40 发布

阅读量1.3k

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_39834370/article/details/120830615

版权

优化加载速度, 压缩字体文件

安装: npm install font-spider -g

查看版本: font-spider -v

1. 新建一个fonts文件

2. fonts下新建index.css 和 index.html 以及放入文件.ttf文件

3. css文件内写入(demo)

@font-face {
  font-family: 'pingfang';
  src: url('./pingfang.ttf')  format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'din_Bold';
  src: url('./DIN_Alternate_Bold.ttf')  format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'din';
  src: url('./D-DIN.ttf.otf')  format('truetype');
  font-weight: normal;
  font-style: normal;
}

4. index.html写入

<!--
 * @Descripttion: 
 * @Author: hejiajun
 * @Date: 2021-10-18 16:29:11
 * @LastEditors: hejiajun
 * @LastEditTime: 2021-10-18 16:47:20
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font.css">
    <style>
        .bold {
            font-family: 'pingfang';
        }

        .bold {
            font-family: 'din_Bold';
        }

        .medium {
            font-family: 'din';
        }
    </style>
</head>

<body>
    <!-- 这里对应的是Bold的压缩包 -->
    <h1 class="medium">
        ABCDEFGHIJKLM
        NOPQRSTUVWXYZ
        abcdefghijklm
        nopqrstuvwxyz
        1234567890
    </h1>
    <!-- 这里对应的是Medium的压缩包 -->
    <h2 class="bold">
        ABCDEFGHIJKLM
        NOPQRSTUVWXYZ
        abcdefghijklm
        nopqrstuvwxyz
        1234567890
    </h2>
    <h3 class="bold">
        汉体书写信息技术标准相容
        档案下载使用界面简单
        支援服务升级资讯专业制作
        创意空间快速无线上网
        ㈠㈡㈢㈣㈤㈥㈦㈧㈨㈩
        AaBbCc ＡａＢｂＣｃ
    </h3>
</body>

</html>

样式类名对应上font-family, div容器内写入ttf文件的内容

5. 执行font-spider index.html

6.fonts文件夹下的字体文件会替换成压缩后的字体文件,原来的字体文件将会在.font-spider文件夹内

亲测12M的文件压缩后只有100KB不到

如果允许配合gzip,妈妈再也不用担心加载过慢的问题了~~~