#FOUT

font-display: swap 如何影响文本可见性与布局偏移：从字体加载到 CLS

本文以电商标题字体加载为例，解析 font-display 的 swap 值如何控制字体加载期间的文本渲染，对比 FOIT 与 FOUT 的权衡，并解释字体加载导致 CLS 的机制。通过对比 block、swap、fallback 和 optional 的适用场景，给出减少 CLS 的实践建议。