前端性能优化之字体篇

最近在开发一个小程序,由于设计字体使用了外部字体:阿里巴巴普惠体,且字体包尺寸过大(10M+),导致小程序进入首页后字体包还没加载完,出现了字体闪动现象。

查阅资料后发现:目前对字体加载优化比较有效的方式有两种:使用 woff2 格式 + 字体切片

其中字体切片方案又分为:字体子集化、字体分包

字体子集化

概念:字体子集化是指将字体文件中的字符子集化,只保留文档中实际使用到的字符,从而减少字体文件的大小。

适用场景:文案直接由前端写死,不依赖后端接口进行动态变化。例如下图这种场景

我们可以使用 fontmin 实现:ecomfe.github.io/fontmin/

我是使用了客户端的方式进行实现:

生成的字体文件:

如果想要体积更小,可以根据下面的方法继续将文件转成 woff2 格式

字体分包

概念:将一个包含多个字体样式(例如不同粗细、斜体等)的字体文件拆分成多个单独的字体文件

适用场景:文案由后端返回。例如下图中纪念品名称和描述都由后端返回,我们提前不能得知页面会展示哪些内容

在线分包工具:chinese-font.netlify.app/online-spli...

可以看到,原来5.19M的字体包被拆分成了多个60kb左右的包

将压缩好的字体文件上传到 cdn + 将输出文件夹中的 result.css 文件放在我们项目中即可,注意改一下 url 的值

关于字体格式,以及如何转换想要的格式

字体格式和兼容性:

.ttf

TrueType,是mac系统和window系统用的最广泛的字体,一般从网上下载的字体文件都是ttf格式,点击就能安装到系统上。

.otf

OpenType,.ttf是.otf的前身,

.eot

Embedded Open Type,主要用于早期版本的IE除了IE以外的浏览器都不太支持。

.woff

Web Open Font Format,可以看作是ttf的再封装,加入了压缩和字体来源信息,通常比ttf小40%。是当前web字体的主流格式。

.woff2

Web Open Font Format 2.0,相比woff最大的优化应该是加强了字体的压缩比。相同字体内容下,woff2比woff要小20%到30%。

文件大小:woff2(*) < woff < ttf ≈ eot

结论:

  • eot:IE系列专属字体方案,不推荐。
  • ttf:兼容性好,但是字体文件较大 ,不推荐。
  • woff:W3C标准,兼容性好,推荐。
  • woff2:W3C标准,但是不兼容IE,推荐。

对比总结我们就会发现,尽管 .woff 文件由于历史原因,许多旧设备的浏览器并不支持,但是考虑当前兼容情况和文件大小的优势,在进行移动Web开发时,我们可以优先考虑使用.woff2,如果需要兼容更多的低版本设备,再考虑使用.woff。

在线字体格式转换工具:

products.aspose.app/font/zh/gen...

cloudconvert.com/otf-to-woff

相关推荐
AnsenZhu2 小时前
2025年Redis分片存储性能优化指南
数据库·redis·性能优化·分片
oioihoii6 小时前
金仓数据库 KingbaseES 产品深度优化提案:迈向卓越的全面升级
数据库·性能优化·金融·金仓数据库 2025 征文·数据库平替用金仓
皮实的芒果20 小时前
前端实时通信方案对比:WebSocket vs SSE vs setInterval 轮询
前端·javascript·性能优化
mx95120 小时前
真实业务场景:在React中使用Web Worker实现HTML导出PDF的性能优化实践
性能优化·浏览器
博睿谷IT99_1 天前
PostgreSQL性能优化实用技巧‌
数据库·postgresql·性能优化
冼紫菜1 天前
基于Redis实现高并发抢券系统的数据同步方案详解
java·数据库·redis·后端·mysql·缓存·性能优化
顾林海1 天前
深入探究 Android Native 代码的崩溃捕获机制
android·面试·性能优化
施嘉伟1 天前
Kingbase性能优化浅谈
性能优化·kingbase
东风西巷1 天前
Control Center安卓版:自定义控制中心,提升手机操作体验
android·智能手机·性能优化·软件需求
万水千山走遍TML2 天前
JavaScript性能优化
开发语言·前端·javascript·性能优化·js·js性能