前言

因为快过年了，相信有些读者如果有年度账单，xx总结，过年期间使用的H5等应用免不了需要加一些花里胡哨的字体，尽管可能没有用，但是奈何UI稿已发，硬着头皮优化一下。接下来带来几种优化方式，字体再多也不加班！！！

font-spider 字蛛

xx曾说过，“如果它大就想办法让它变小”。

所以我们可以将我们所用到的所有文字，单独复制到静态 html中通过 font-spider 过滤掉我们不会用到的文字，并重新生成一个字体包，其中只包含我们会用到的文字。这样就大大减小了字体包的体积。

初始化npm项目

npm init 
复制代码

下载字蛛

 npm install font-spider -g
复制代码

创建一个index.html

加入你会用到的文字资源到span中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    @font-face {
        font-family: 'font';
        src:url("./font/FZGongYHJW.ttf");
    }
    span{
        font-family: "font";
        font-size: 20px;
    }
</style>
<body>
    <span>1234567890.%</span>
</body>
</html>
复制代码

指令压缩

font-spider index.html      
复制代码

运行指令会生成一个.font-spider的文件夹中包含一个已经压缩好的字体包。后续可以使用这个字体包，前提是需要沟通好到底需要哪些文字字符等。

效果完美！从1.5m 降到 3.76kb！

此方法基于静态文档的文字，来缩减字体包，如需可视化生成字体包可以使用 #Fontmin

cdn 加速

但是尽管根据需求压缩后的大小，可能还会有读者觉得，我用的字比较多，可能还是比较大那咋办啊。不慌，还有别的办法。

可以将压缩后的字体包，上传到cdn提升加载速度。只需要将我们将上传后的地址引入

@font-face {
        font-family: 'font';
        src:url("https://xxxx.com/font/FZGongYHJW.ttf");
}
复制代码

这里可以通过腾讯云或者七牛云，大体就是上传文件和直接包含到前端资源文件中，通过缓存url的文件，来加速。由于过于简单(要钱)这里不做演示了。可以大大提升加载速度。

开启 gzip 加速

接下来弄点不要钱但是效果依旧不错的加速方式。实际上就是通过nginx开启gzip压缩传输

# 开启和关闭gzip模式
gzip on|off; 
# gizp压缩起点，文件大于1k才进行压缩
gzip_min_length 1k; 
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 5; 
# 进行压缩的文件类型。 
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript font/ttf; 
#nginx对于静态文件的处理模块，开启后会寻找以.gz结尾的文件，直接返回，不会占用cpu进行压缩，如果找不到则不进行压缩 
gzip_static on|off 
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on; 
# 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区 
gzip_buffers 2 4k; 
# 设置gzip压缩针对的HTTP协议版本 
gzip_http_version 1.1;
复制代码

并不需要额外设置其他，gzip会对ttf进行默认压缩传输。

成功成1.6mb 压缩到1.2mb 效果显著！

font-display 调整顺序，不阻塞加载

最后我们还可以通过font-display来调整加载顺序

设置为font-display:fallback;来调整加载顺序，减少白屏加载字体包时间，保证加载时间过长就先用默认字体显示，您希望用户尽快开始阅读，并且不想在加载新字体时四处移动文本来打扰他们的体验！

结语

上述就是本篇文章的全部内容了，收录目前最常用的字体优化的几种方式。希望可以帮到你～

「一起努力一起进步，我是阿江！」

【前端优化】第三方字体优化方案大全

前言