More than you ever wanted to know about font loading on the web (2021)
a year ago
- #performance optimization
- #Core Web Vitals
- #web fonts
- 文章探讨了网页字体加载的挑战及其对核心网页指标（特别是最大内容绘制时间LCP和累计布局偏移CLS）的影响
- 建议使用`font-display: optional`来提升LCP和CLS，确保文本快速渲染并避免布局偏移
- 分析了`font-display: optional`不适用的场景，例如当不存在合适备用字体时（如图标字体）
- 探讨了`preload`与`font-display: optional`配合使用的潜在带宽消耗与性能取舍
- 强调浏览器缓存行为的变化，建议自托管字体或其加载CSS以避免跨域请求
- 介绍了一个能自动匹配备用字体与自定义字体的工具，减少自定义字体加载时的布局偏移
- 提及了`size-adjust`、`ascent-override`和`descent-override`等新标准可实现更精准的字体匹配
- 总结指出：结合`font-display: optional`与自托管CSS能优化LCP和CLS，同时新标准提供了更多解决方案