font-display 应设为 fallback 最防闪屏，swap 适合正文但弱网下明显替换，optional 适合装饰性字体，auto 默认阻塞渲染3秒；google fonts 需手动加 &display=swap 或 fallback；本地 @font-face 必须每个变体单独声明 font-display。
font-display 属性怎么设才不闪屏
字体加载时页面先用系统字体渲染，等自定义字体就绪再重绘，这个“重绘”就是用户看到的闪屏（FOIT 或 FOUT）。关键不是加不加 font-display，而是选对值：swap 最常用，但不是万能解药。
-
font-display: swap：立即显示备用字体，等 Web 字体加载完成立刻替换——适合正文，但动画式替换在弱网下明显； -
font-display: fallback：只给 100ms 的“字体等待窗口”，超时就用备用字体，之后即使字体加载完也不替换——防闪屏最稳，但可能永远不用上你的 Web 字体； -
font-display: optional：浏览器决定是否加载，移动端常直接跳过——适合非关键字体，比如装饰性标题字； - 别用
auto（默认值）：Chrome 会强制阻塞文本渲染长达 3s，用户看到空白段落是常态。
Google Fonts 怎么配 font-display
直接抄官方链接会漏掉 font-display 参数。Google Fonts 的 &display=swap 是必须手动加上的查询参数，否则它默认返回 font-display: auto 的 CSS。
- 正确写法：
https://fonts.googleapis.com/css2?family=Inter&display=swap； - 如果用了
@import，得自己补声明——@import加载的 CSS 里没覆盖font-display就等于没设； - 用
&display=fallback时，注意 Google Fonts 返回的 CSS 里会带font-display: fallback，但部分旧版 Chrome（≤97）不支持该值，会退化成auto； - 本地字体（
@font-face）必须手写font-display，Google Fonts 链接不帮你注入。
本地 @font-face 怎么写才可控
自己托管字体时，@font-face 块里漏掉 font-display 就等于放弃控制权。而且不同格式、不同 weight 的声明必须各自带上该属性，不能靠继承。
font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
font-weight: 400;
font-display: fallback; /* 必须每套都写 */
}- 多个
@font-face声明（比如 400/700/italic）要分别加font-display，缺一个就会按默认行为处理； -
woff2和woff同时存在时，浏览器优先选woff2，但 fallback 行为仍以该声明整体的font-display为准； - 别信“只写一次就行”——CSS 里没有全局
font-display设置，每个字体族、每个变体都得单独声明。
为什么开了 font-display 还有闪动
常见错觉是“设了 swap 就万事大吉”，其实闪动往往来自别的环节：字体加载时机、CSS 加载顺序、甚至 layout shift。
立即学习“前端免费学习笔记（深入）”；
- CSS 文件本身加载慢，导致
@font-face声明晚于 HTML 渲染——把字体 CSS 放到顶部，别 defer； - 字体文件体积过大（尤其未压缩的
woff），swap只管“等多久”，不管“等多快”——优先用woff2，并 subsetting 中文字符集； - 字体加载后重排文字，但容器高度没预留（比如
line-height按系统字体设的），造成文字跳动——用size-adjust或ascent-override微调字体度量； - 用了
font-display: fallback却发现字体还是加载了——检查 DevTools → Network，确认字体请求没被缓存或预加载干扰。
真正难控的是字体度量差异。哪怕 font-display 设对了，中文字体换行位置、行高变化、标点悬挂偏移这些，没法靠 CSS 属性一键对齐。得测真实设备、留白余量、接受轻微不一致。
