前端性能优化之字体篇

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

相关推荐
庸俗今天不摸鱼39 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
Process6 小时前
前端图片技术深度解析:格式选择、渲染原理与性能优化
前端·面试·性能优化
沐土Arvin7 小时前
Nginx 核心配置详解与性能优化最佳实践
运维·开发语言·前端·nginx·性能优化
爱的叹息8 小时前
针对 SQL 查询中 IN 子句性能优化 以及 等值 JOIN 和不等值 JOIN 对比 的详细解决方案、代码示例及表格总结
数据库·sql·性能优化
我有医保我先冲17 小时前
SQL复杂查询与性能优化:医药行业ERP系统实战指南
数据库·sql·性能优化
anda010918 小时前
11-leveldb compact原理和性能优化
java·开发语言·性能优化
爱吃馒头爱吃鱼18 小时前
QML编程中的性能优化二
开发语言·qt·学习·性能优化
桂月二二21 小时前
Vue3服务端渲染深度解析:从Nuxt3架构到性能优化实战
性能优化·架构
我有医保我先冲1 天前
SQL复杂查询与性能优化全攻略
数据库·sql·性能优化
庸俗今天不摸鱼1 天前
【万字总结】前端全方位性能优化指南(九)——FSP(First Screen Paint)像素级分析、RUM+合成监控、Lighthouse CI
前端·性能优化