font-display: fallback 是移动端字体加载优化的合理起点，它让浏览器在500ms内用系统字体渲染，超时即放弃加载，兼顾不阻塞布局与避免强替换跳动；需配合preload（带crossorigin和as="font"）、正确format声明、中文字体子集化及显式尺寸约束方可生效。
核心是让文字“立刻可见、尽量不跳”，而不是等字体全加载完才显示。关键不在压缩体积本身，而在于控制浏览器何时用什么字体、怎么过渡。
用 font-display: fallback 作为默认策略
它让浏览器在 500ms 内用系统字体渲染，超时就放弃加载自定义字体。既避免 FOIT（空白闪），又防止 swap 带来的替换跳动——尤其适合中英文混排和弱网环境。
- 每个字重（Regular / Bold / Medium）都要单独写 @font-face，并显式声明 font-display: fallback
- 务必补全 format("woff2")，否则旧版 Safari 或 WebView 可能直接忽略整条规则
- 别把 fallback 当备选：它就是首屏实际渲染所用的字体，要认真选同类型、度量接近的 fallback 链，比如 "Inter", "system-ui", -apple-system, "Segoe UI"
必须配合 preload 提前触发请求
光设 font-display 没用——如果字体请求还没发出，500ms 窗口早就过了。preload 是唯一能在 HTML 解析阶段就拉取字体的方式。
- link 标签必须带 crossorigin 属性（哪怕字体同源），WOFF2 加载强制跨域模式
- as="font" 和 type="font/woff2" 缺一不可，否则浏览器当普通资源处理，不提优先级
- href 路径要和 @font-face 中 src 完全一致（包括查询参数），否则无法复用预加载资源
中文字体必须做子集化 + 尺寸锁定
完整中文字体动辄 2–5MB，swap 或 fallback 都扛不住这么大的度量偏差。不子集化，布局抖动几乎必然发生。
- 按页面实际用到的汉字生成子集（如标题、按钮文案、常用词），体积压到 200KB 以内
- 在 @font-face 中加 size-adjust 或 ascent-override 对齐 x-height 和基线，数值需实测（例如 size-adjust: 102%）
- 容器高度、行高、padding 等尽量用固定值或 rem 单位，避免字体替换引发重排
用 localStorage 记录加载状态做二次优化
首次加载成功后，存下子集哈希、语言标识、渲染标记等轻量元数据，后续访问可跳过重复请求，直接调用 document.fonts.load() 触发已缓存字体的渲染。
- 存对象必须 JSON.stringify()，读取时加 try-catch 并设默认值
- 判断是否存在要用 localStorage.getItem('key') !== null，不能只用 if (getItem())
- 配合 font-display: swap 使用更稳妥：swap 保可见性，localStorage 控制替换时机
