前端性能优化之字体篇

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

相关推荐
修电脑的猫2 小时前
Performance Monitoring on Production Systems in SAP ERP(ABAP性能优化)
性能优化·abap
星辰离彬2 小时前
Java 与 MySQL 性能优化:Java应用中MySQL慢SQL诊断与优化实战
java·后端·sql·mysql·性能优化
Edingbrugh.南空6 小时前
操作系统级TCP性能优化:高并发场景下的内核参数调优实践
网络协议·tcp/ip·性能优化
Edingbrugh.南空7 小时前
ClickHouse 全生命周期性能优化
clickhouse·性能优化
运维小贺10 小时前
各服务器厂商调整BIOS睿频教程
linux·运维·服务器·性能优化
Thomas_YXQ12 小时前
Unity3D游戏内存优化指南
游戏·unity·职场和发展·性能优化·蓝桥杯·游戏引擎·unity3d
合作小小程序员小小店14 小时前
web网页开发,在线%ctf管理%系统,基于html,css,webform,asp.net mvc, sqlserver, mysql
mysql·sqlserver·性能优化·asp.net·mvc
Thomas_YXQ1 天前
Unity URP法线贴图实现教程
开发语言·unity·性能优化·游戏引擎·unity3d·贴图·单一职责原则
熊猫钓鱼>_>2 天前
Django全栈开发:架构解析与性能优化实战
性能优化·架构·django
天若有情6732 天前
03_性能优化:让软件呼吸更顺畅
计算机·性能优化·软件·发展