首屏文字先空白再闪出来 font-display 该选哪个值

自定义字体加载前标题整段是空的 白屏大约 1.8 秒 字体到了文字才一起出现 行高还跟着变了一次 典型的 FOIT。第一次遇到会往复杂处想，其实漏掉的多是个小前提。

@font-face {
  font-family: 'Brand';
  src: url('/fonts/brand.woff2') format('woff2');
  font-display: swap;
}

font-display 默认是 auto 浏览器可以一直不画文字 直到字体下载完才渲染 网络慢的时候这段时间会被拉得很长 换成 swap 会先用回退字体画出来。这一点先确认清楚，后面就不用反复试。

「font-display 取值」相关的日志我一般连着看前后五分钟，单看一条报错经常判断不出是哪一步失败。把这次用到的命令存进笔记，比记住结论有用，换个环境还能照着走。

改完隔一天再看一次，当场正常不代表能稳住。

具体做法是，在 @font-face 规则里加上 font-display swap 让正文文字先用回退字体显示出来；给回退字体设置 size-adjust 和 ascent-override 减小字体替换瞬间的高度偏移；字体文件加上 preload 并把 crossorigin 一起写上 避免发生二次请求。

改完照着核一遍，限速下首屏立刻能看到回退字体的文字 字体到达后只替换一次且没有位移。