font-spider-plus字体文件压缩

中文字体文件一般都非常庞大，本地开发使用时可能感觉不到，但是部署到服务器之后，会发现页面加载速度被明显拖慢，一个字体文件可能要加载2分钟（增加页面2分钟白屏时间）。

只在字库中保留页面中出现的文字，将其他大量不用的文字删掉，生成一个只包含特定字符的小字体文件，便可以大大减少字体文件，从而提高访问速度。

这里我使用font-spider-plus来实现上述操作。

font-spider-plus的npm文档

首先给出我操作字体文件的文件结构：

common文件夹

        font文件夹

                一些字体网站下载的.otf、.ttf字体文件

                font.css——关于这些字体文件的css样式

                .font-spider文件夹——使用font-spider-plus工具生成的文件夹，后面细说

        index文件夹

                index.html——用来压缩字体的文件（其实写在哪都行）

全局安装font-spider-plus:

$ npm i font-spider-plus -g

index.html内容：

<div class="test">
    1234567890
</div>
<style>
    @font-face {
        font-family: 'Number';
        src: url('../font/Number.ttf');
        font-weight: normal;
        font-style: normal;
    }
    .test{
        font-family: 'Number';
    }
</style>

div标签内的内容就是你需要的字（这里我需要这个字体文件的所有阿拉伯数字字体）

@font-face里的内容就是写样式：

        font-family就是你给字体起的名字

        src是字体源文件的url

        其他的就是一些样式设置，当然不止我写的这些

.test里就是对应上面的div标签，把里面的文字变成你需要的字体

然后就是使用font-spider-plus工具进行压缩，这里我直接在idea里的Terminal里操作了

先cd到common文件夹下，然后执行命令：

$ fsp local index/index.html

这里是我操作的截图：

操作完成后，原字体文件被移动到了.font-spider文件夹下，并在原来的位置换上压缩过的字体文件 。