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

最新推荐文章于 2024-08-08 07:11:14 发布

CRMEB定制开发

最新推荐文章于 2024-08-08 07:11:14 发布

阅读量1k

点赞数

分类专栏：学习笔记文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_39221436/article/details/122357357

版权

学习笔记专栏收录该内容

324 篇文章 8 订阅

订阅专栏

前言
因为快过年了，相信有些读者如果有年度账单，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进行默认压缩传输。