前端性能优化之字体篇

最近在开发一个小程序,由于设计字体使用了外部字体:阿里巴巴普惠体,且字体包尺寸过大(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

相关推荐
顾林海18 小时前
Android编译插桩之AspectJ:让代码像特工一样悄悄干活
android·面试·性能优化
颜如玉1 天前
HikariCP:Dead code elimination优化
后端·性能优化·源码
DemonAvenger2 天前
NoSQL与MySQL混合架构设计:从入门到实战的最佳实践
数据库·mysql·性能优化
Pu_Nine_93 天前
深入理解节流(Throttle):原理、实现与应用场景
javascript·性能优化·es6·节流·lodash 库
文人sec3 天前
性能测试-jmeter9-逻辑控制器、定时器压力并发
测试工具·jmeter·性能优化·模块测试
鼠鼠我捏,要死了捏3 天前
RocketMQ 高可用集群原理深度解析与性能优化实践指南
性能优化·消息队列·rocketmq
李游Leo4 天前
JavaScript事件机制与性能优化:防抖 / 节流 / 事件委托 / Passive Event Listeners 全解析
开发语言·javascript·性能优化
不想被吃掉氩4 天前
MySQL的性能优化。
数据库·mysql·性能优化
DemonAvenger4 天前
数据库日志系统深度解析:从binlog到redo/undo日志的实践指南
数据库·mysql·性能优化
努力的小郑4 天前
MySQL索引(四):深入剖析索引失效的原因与优化方案
后端·mysql·性能优化