CSS---引用外部字体（二）---优化 css

在页面上引入字体后，会带来一个性能的问题。
通常字体文件都比较大，差不多都是2、3M，有时候4、5M也是有的，因为里边有成百上千的汉字嘛。可问题是，我的页面上很可能就只需要显示那么十七、八个字，为了这几个字，我得下载个4、5M的字体，有点儿划不来啊。
这个问题怎么解决呢？
我们这样思考一下：能不能从现有的字体里把需要显示的字抽取出来呢？页面上要显示十七个字，我就抽十七个，需要显示二十三个字，我就抽二十三个字，然后把抽取出来的字，重新生成字体文件，这样新的字体文件就会大大缩减，同时也能满足页面显示的需求。
font-spider（字蛛）就能完成上述的工作。下面介绍一下它的使用方法。

安装font-spider依赖。

npm install font-spider -g

安装完成后，可通过font-spider -V查看是否安装成功。
新建一个目录，目录下包含一个css文件，一个html页面和一个font文件夹，font文件夹里包含我们的原始字库（这里使用了可口可乐在乎体），如图所示：

文章图片

main.css的内容如下：

@font-face { font-family: 'co'; src: url('./fonts/coca.ttf') format('truetype'); font-weight: normal; font-style: normal; } .medium { font-family:'co'; }

index.html的内容如下：