前端性能优化之字体篇

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

相关推荐
float_六七5 小时前
数据库连接池:性能优化的秘密武器
数据库·oracle·性能优化
翻滚丷大头鱼8 小时前
android 性能优化—ANR
android·性能优化
翻滚丷大头鱼8 小时前
android 性能优化—内存泄漏,内存溢出OOM
android·性能优化
Linux运维技术栈10 小时前
域名网页加载慢怎么解决:从测速到优化的全链路性能优化实战
运维·网络·nginx·性能优化·cloudflare
荣光波比11 小时前
Nginx 实战系列(六)—— Nginx 性能优化与防盗链配置指南
运维·nginx·性能优化·云计算
DemonAvenger17 小时前
MySQL内存优化:缓冲池与查询缓存调优实战指南
数据库·mysql·性能优化
前端小万17 小时前
一次紧急的现场性能问题排查
前端·性能优化
老马啸西风1 天前
v0.29.2 敏感词性能优化之基本类型拆箱、装箱的进一步优化的尝试
性能优化·开源·nlp·github·敏感词
Jerry&Grj1 天前
SpringBoot埋点功能技术实现方案深度解析:架构设计、性能优化与扩展性实践
java·微服务·性能优化·springboot·架构设计·埋点技术
大咖分享课1 天前
架构性能优化三板斧:从10秒响应到毫秒级的演进之路
性能优化·架构