font-display 应选 swap 最稳妥，系统字体先显示、自定义字体加载完即替换，人眼几乎无感；optional 仅适用于非关键品牌字体，需精确声明 font-weight 和 font-style；禁用 block，避免移动端反复阻塞。
font-display 属性值选哪个才不闪屏
关键不是“用不用 font-display”，而是选错值会让字体在小屏幕或弱网下更卡。默认的 auto 在 chrome 里等同于 block，会强制空白期长达 3 秒，用户看到文字消失再弹出——这不是加载慢，是策略错。
实操建议：
-
swap最稳妥：系统字体先顶上，自定义字体加载完立刻替换，人眼几乎无感，适合正文类字体（如Inter、Source Sans Pro） -
optional仅限品牌字体或非关键展示：浏览器判断网络慢就跳过加载，但必须配合@font-face的font-weight和font-style精确声明，否则 fallback 失效 - 别用
block：响应式页面里 viewport 变化频繁，反复触发字体阻塞，移动端尤其明显
媒体查询里动态切字体文件靠谱吗
不靠谱。css 媒体查询无法触发字体文件的按需下载，@font-face 规则一旦解析，浏览器就会按 src 列表发起请求，不管它被哪个 @media 包裹。
常见错误现象：写了 @media (max-width: 768px) { @font-face { src: url('text-small.woff2'); } }，结果 desktop 和 mobile 都下了两个文件。
立即学习“前端免费学习笔记（深入）”；
正确做法：
- 用
src里的format()+tech()描述符做条件，但支持度有限，不如直接放弃 - 真正可控的方式是 js 动态注入
@font-face：检测window.matchMedia变化，再创建link或style标签，只加载当前匹配的字体 - 更简单的是服务端根据 UA 或 DPR 返回不同 CSS，把媒体逻辑前置
font-display 和 preload 冲突怎么办
冲突时浏览器以 preload 为准，但副作用是：如果 preloaded 字体还没被 CSS 引用，font-display: swap 的 fallback 行为会失效——文字一直空白，直到 preload 完成。
使用场景：你希望首屏文字秒出，又想提前加载高权重字体。
实操建议：
- 只对
font-display: optional或swap的字体做preload，且必须加as="font"和type="font/woff2" -
preload的href必须和@font-face的src完全一致（含 query 参数），否则算两个资源，白下一遍 - 避免在
里写多个preload，移动端 DNS 查询和连接数有限，优先保正文字渲染的那一个
Web 字体在 CSS 媒体查询切换时重排问题
字体加载完成、替换显示时，如果新字体字宽/行高和 fallback 差太多，元素尺寸会变，触发 layout shift——尤其是 flex / grid 容器里的标题，一跳就破坏响应式对齐。
性能影响比想象中大：LCP（最大内容绘制）分数直接受损，Core Web Vitals 不达标。
解决思路：
- 用
size-adjust和descender-override等 OpenType 特性微调 fallback 行为，但兼容性差，仅 safari 支持较全 - 更通用的是预设
font-size、line-height、letter-spacing，让 fallback 和真实字体视觉高度接近（比如都设line-height: 1.4） - 关键容器加
contain: layout style，限制重排范围，但注意老版本 ios Safari 不支持
字体不是配色或动效，改一点就可能让整个响应式断层。最常被忽略的是：同一套字体在不同 media query 下，没做字重映射或字号阶梯收敛，结果 tablet 拿着 desktop 的 font-weight 渲染，粗得像标题。