流量在流失！
凌晨两点，设计师小李被老板的电话惊醒：“用户投诉活动页打开后一直白屏！流量在流失！”小李睡眼惺忪地打开电脑，发现页面卡在了一个尴尬的阶段——阿里巴巴普惠体加载缓慢，用户只能盯着空白页干等。这个“字体加载黑洞”，不仅让精心设计的品牌视觉失效，更让用户无情地关闭了页面……
字体加载的“生死3秒”
当网页使用自定义字体（如阿里巴巴普惠体）时，浏览器必须下载完字体文件才能渲染文字。若网络环境差，用户会经历三个阶段：
- 阻塞期：浏览器不显示任何文字（白屏噩梦）；
- 交换期：暂时用系统字体渲染，等自定义字体加载后替换（页面闪动）；
- 失败期：直接放弃加载，永久使用后备字体（品牌感丢失）。
而 font-display 这个CSS属性，正是通过控制这三个阶段的时间策略，在用户体验与品牌视觉间找到平衡点。
font-display 五大战术手册
@font-face {
font-family: ExampleFont;
src: url（/path/to/fonts/examplefont.woff）format（'woff'），
url（/path/to/fonts/examplefont.eot）format（'eot'）;
font-weight: 400;
font-style: normal;
font-display: swap; /* 关键武器在此！ */
}
swap（最激进）
白屏时间最短，立即用后备字体，加载后秒换品牌字体——适合强品牌但能容忍短暂风格变化的场景。
block（最谨慎）
白屏稍长，宁可等也要优先展示品牌字体——适合奢侈品、高端品牌页。
fallback（折中选择）
白屏和闪动时间都较短，超时则永久用后备字体——平衡体验与稳定性。
optional（极致性能）
根据网络预测智能选择，弱网环境下可能直接放弃加载——适合工具类产品。
auto（浏览器说了算）
把决定权交给系统，但可能不如主动控制精准。
实战决策指南
- 活动页/品牌官网 →
swap（先留住用户，再秀品牌） - 后台系统/工具页 →
optional（性能优先，字体次之） - 字体文件较小 →
block（快速加载，无感知替换） - 慎用陷阱：若使用
swap，务必测试字体替换时的页面抖动问题，避免布局错乱！
总结
font-display 如同一名“字体调度员”，在用户等待的煎熬时刻，它决定了
- 是否用空白换取品牌坚持
- 是否用闪动换取速度妥协
- 是否用后备字体换取永久体验
下一次，当你的页面因字体加载陷入沉默时，别忘了这个藏在 @font-face 中的时间魔法师——它能让空白屏“开口说话”，让品牌在速度与美之间优雅着陆。
🔥 关注我的公众号「哈希茶馆」一起交流更多开发技巧
