F4.15.1font loading display strategy设计

自定义字体加载完成前的文本呈现方式需要显式策略

别名: font-display · 字体加载策略 · webfont swap

概念解释

自定义字体在网络上,正文在本地。中间这段时间,界面必须先做一个选择:把字藏起来等、先用后备字体画、还是放弃这次替换。加载期呈现策略(font loading display strategy)就是把这个选择写下来。不写的时候,浏览器和系统各有默认,同一产品在不同端上会一个先空白、一个先串字体,像没设计过。

机制

字体文件是额外资源,到达时间不可与首屏绘制绑死。排版引擎在文件未到时仍然要决定每个字形用哪张表。可选的路只有有限几条:阻塞绘制(一段时间内看不见字)、立刻用后备字体画、短阻塞后再换、或者超时后永远不换以免跳动。Web 上这些路被收成 font-display 的档位;原生上对应「等自定义字体 / 先用系统字体」。默认值随引擎变,不是产品决策。没有显式策略时,设计稿只画了加载成功后的那一帧,加载中的那几秒被留给了引擎脾气。策略要按文本角色分:品牌字标可以等多一会儿,正文段落不能。

边界

本地已经装好的字体、系统 UI 字体,没有加载期,策略无对象。离线包、应用内嵌的字体文件,加载变成磁盘读取,延迟通常短到策略差异看不出来,但第一次安装仍可能碰到。图标字体把语义画在私用区,策略选错会先露出方框或乱码,不能和正文共用同一档。打印、PDF 导出走嵌入,不走网络加载这条时间轴。

怎么落地

  • 给品牌字标、正文、图标字体分别写下加载期要走哪条路,写进实现,而不是只在设计稿里画成功态。
  • 用网络限速打开首屏,看文字第一次出现的时刻和当时用的是哪张字体。若这个结果事先没人能说出来,策略就还没定。
  • 正文默认倾向「先可见」;只有字标这种短、且识别依赖那一张脸的元素,才允许短暂不可见。

延伸

  • 同组F4.15.2 长时间空白等待字体会比先用回退字体展示更损害体验 · F4.15.3 回退字体与目标字体的度量差异会造成加载后的布局跳动 · F4.15.4 网络字体加载失败时系统字体应作为兜底而非留白
  • 相邻F4.07 字体选择 · F7.06 动效掩盖延迟
  • 站内检索font-display · FOIT · FOUT

同组卡片

快捷操作

分享

分享当前页面

ios_share

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