如何压缩字体提高网站加载速度

文章正文还需 1 分钟

背景

领导说做成字体加载

问题：设计师丢了一个19M的字体包给我，不可能为了加载几个艺术字，在网页上加载一个这么大的字体文件

既然文件大，就需要把文件变小，压缩字体

压缩字体

安装

bash 复制代码

npm install font-spider -g

准备文件

html

在html中写上

html 复制代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @font-face{
            font-family: 'wljht';
            src : url('./字魂110号-武林江湖体.TTF');
        }
        .ceshi{
            font-family: wljht;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <p class="ceshi" id="ceshi">品茗远程异地评标系统</p>
</body>
</html>

执行

bash 复制代码

font-spider *.html

结果

注意看对比文字的结果

验证

顺利解决此问题，

不过在ie浏览器还需要进一步转换

font-spider

font-spider 工作原理,就是把网页中需要的字体提取出来，然后在生成一个字体文件，从而就大大减少了字体大小