web性能优化（一）字体包优化

在当今追求极致用户体验的Web开发领域，性能优化始终是我们不可忽视的关键。下面将开启Web性能优化系列的第一篇章------字体包优化。

字体作为网页视觉呈现的重要组成部分，往往也是性能的"隐形杀手"。一个未经优化的字体包可能会：

• 显著增加页面加载时间
• 阻塞关键渲染路径
• 造成布局偏移(CLS)问题
• 消耗用户不必要的流量

我们将深入探讨如何通过现代Web技术手段，在保持设计美感的同时，实现字体加载的高效优化。

首先我们走字体包本身大小说起，通过deepseek检索和我们下本地字体文件，可以看到不同格式下同一种字体包大小是不一致的

1. 在当前浏览器情况下 ，我们通过查看可以看到目前除了ie之外的所有主流浏览器均已经支持了,我们目前使用的几个主流格式字体包，otf/ttf/woff/woff2，当然其中入eot，otc这种私有格式我们排除在外，通过对比文件包大小来说首选我们使用woff2格式，毕竟现在ie都变成edge使用谷歌内核了

2. 说完格式选项，出现了需求方说我就是需要使用经典的ttf/otf文件需要优化到跟目前各大主流淘宝，京东那样小呢

• 首先这块需要后端协助 方法一：将单个字体文件由后端分割成一个个小于50Kb的字体文件全部加载

  • 使用在线工具 压缩 原大小文件

  分割后大小文件

  • 方法二：使用字符串子集，只加载需要的字体