F4.15.4webfont failure fallback设计

网络字体加载失败时系统字体应作为兜底而非留白

别名: 字体加载失败 · font stack · 系统字体兜底

概念解释

文件可以永远不到:域名挂了、被拦截、证书错、用户离线。加载失败不是「再等一会儿」,是这次替换被取消。失败兜底(webfont failure fallback)要求此时仍有一张能用的系统字体把字画出来。留白、方框、看不见的按钮,是把一次资源错误做成了功能消失。它和加载中的短暂空白不是同一件事:加载中还可能成功,失败已经没有下一帧了。

机制

字体栈是一份有序列表,引擎从前往后找第一张能用的。自定义字体在最前,失败后本应落到后面的系统族。栈若只写了那一张自定义、或阻塞策略在失败后仍把墨保持透明,列表里没有下一张,绘制就停在空洞。失败与超时在实现里常和「还在加载」共用一条路,于是失败被当成无限加载,FOIT 永不结束。系统字体作为最后一档,不是审美上的将就,是让阅读任务在资源层失败时仍能开始。栈还要覆盖字种:中文正文落到一款实际含汉字的系统字体,落到一款拉丁字体上会整段方框。

边界

品牌字标失败后用系统字体,识别会变,但比消失好;若字标同时有图形版,图形版才是识别兜底,字体栈是文案兜底。图标字体失败不能靠系统字体「读出」私用区码点,必须有 SVG 或文本标签第二条路。企业内部只内网能拉到的字体,在外网失败是预期,更要把系统栈写完整。用户主动卸了某款系统字体时,栈要有下一档,不能假设每台机器都有你点名的那一张。

怎么落地

  • 字体栈在自定义之后写上系统族,中文、西文分开落到真正含那些字的脸;不要只写一张网络字体。
  • 把字体 URL 拦掉(失败,不是限速)再打开页面:正文应立即以系统字体可读,按钮上应有标签。若仍是空白,失败被当成了永远加载。
  • 超时后强制走栈里的下一张,不要让阻塞在失败态里挂着。

延伸

  • 同组F4.15.1 自定义字体加载完成前的文本呈现方式需要显式策略 · F4.15.2 长时间空白等待字体会比先用回退字体展示更损害体验 · F4.15.3 回退字体与目标字体的度量差异会造成加载后的布局跳动
  • 相邻F4.07 字体选择 · E6.10 错误与回退页
  • 站内检索font stack · webfont failure · system font fallback

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F4.15.4