网页性能

优化字体加载以提升速度和 Core Web Vitals 表现——子集化、预加载、FOUT/FOIT 预防与 CLS 修复。

网页性能

为性能而生的可变字体：一个文件统领全局

可变字体可以用一个文件取代 6 个以上的静态字体文件。其性能影响——文件大小、HTTP 请求数与真实基准测试。
网页性能

FOUT 与 FOIT：理解无样式与不可见文本闪烁

FOUT 会显示回退文本，FOIT 则什么都不显示。两者都是字体加载的副作用——这里介绍其成因和解决方法。
网页性能

防止字体加载导致的布局偏移（CLS）

字体加载是累积布局偏移（CLS）的一个隐藏来源。学习 size-adjust、字体指标覆盖，以及消除字体相关 CLS 的策略。
网页性能

Google Fonts 性能：速度技巧与最佳实践

Google Fonts 很方便，但可能拖慢你的网站。通过 display=swap、preconnect 提示、自托管和子集加载优化加载速度。
网页性能

font-display：swap、fallback、optional 该如何选择

font-display 这个 CSS 描述符控制着字体加载期间用户所看到的内容。每个取值都有取舍——这里介绍如何选择正确的一个。
网页性能

字体预加载：优先加载最重要的字体

使用 <link rel=preload> 告诉浏览器哪些字体最重要。减少 FOUT，改善 LCP，并理解预加载何时有帮助、何时有害。
网页性能

字体子集化：削减 90% 字体文件体积

大多数网页字体包含数千个未使用的字符。学习如何对字体进行子集化，只加载所需内容——大幅削减文件体积。
网页性能

网页字体性能：完整优化指南

关于字体性能你需要了解的一切——文件大小、加载策略、渲染阻塞，以及字体如何影响核心网页指标。