"Web 字体加载优化：font-display、preload 与子集化"

概述字体加载不当会导致阻塞与闪烁（FOUT）。通过 `font-display` 控制渲染行为、`preload` 提前请求关键字体、子集化或分包降低体积，可显著改善首屏体验与 LCP。关键策略`font-display`：`swap` 减少阻塞但可能闪烁；`optional` 在超时后不切换，需结合 UX 评估［参考3,4］。`preload as="font"`：在关键渲染路径提前请求字体，提高可用性；需与 `crossorigin`、MIME 类型配合［参考1,4］。子集化/分包：`unicode-range` 或中文字体分包降低体积与阻塞风险，动态文本需谨慎评估［参考2,5］。实践建议为首屏关键字体使用 `preload` + `font-display: swap`，并设置回退字体以减少布局抖动。中文场景优先分包或云服务子集方案，动态内容评估覆盖风险；对 Logo 等关键文本优先保证加载时效。参考与验证［参考1］web.dev：优化 WebFont 加载与渲染（preload 与 font-display 的协作）：https://web.dev/i18n/zh/optimize-webfont-loading［参考2］博客：中文网页字体加载优化与分包实践（子集化说明）：https://www.hehehai.cn/posts/chinese-web-font-optimize［参考3］CSDN：font-display 与 preload 的实战与注意事项（FOUT 与回退策略）：https://blog.csdn.net/csdnnews/article/details/117719248［参考4］知乎：Web 字体优化实践（preload 与渲染时间线）：https://zhuanlan.zhihu.com/p/272783891［参考5］技术博客：中文字体优化与 `unicode-range` 应用与注意事项：https://maxket.com/web-font-optimization-for-chinese-pages/关键词校验关键词紧扣字体加载与优化策略，与正文一致。