google fonts加载失败导致数字字体不生效，应使用link预连接+display=swap，并设置font-family回退链确保等宽一致性。
Google Fonts 加载失败导致数字字体不生效
网页里数字看着还是默认的系统字体，明明在 CSS 里写了 font-family: 'Roboto Mono', monospace;，但没效果——大概率是 Google Fonts 没加载进来，或者加载顺序/时机不对。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别只靠
@import放在 CSS 文件顶部：它会阻塞渲染，且网络失败时无降级；优先用<link rel="stylesheet">标签放在中，并加preconnect提前建立连接：<link rel="preconnect" href="https://fonts.googleapis.com"><br><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><br><link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
-
display=swap必须加上，否则字体加载完成前数字会空白或回退到 serif 字体，影响数字对齐和视觉一致性 - 检查浏览器开发者工具的 Network 面板，过滤
fonts，确认css2?请求返回 200，且响应体里真有@font-face声明
数字等宽对齐时 Roboto Mono 和 Fira Code 的选择差异
做计数器、价格、时间戳这类需要右对齐或列对齐的数字展示，选错字体会导致小数点飘、负号错位、甚至宽度跳变。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
Roboto Mono是 Google 官方推荐的免费等宽字体，所有数字（0–9）、符号（.、-、+）宽度严格一致，适合纯数字场景；Fira Code虽也等宽，但默认开启连字（ligatures），可能把==或!=渲染成单个符号——对数字展示完全没必要，还增加渲染开销 - 如果要支持中文数字混排（比如“¥12,345.67”），选
Noto Sans Mono CJK SC更稳妥，但体积大；Roboto Mono不含中文字形，遇到中文会 fallback，需显式声明备用字体链：font-family: 'Roboto Mono', 'Noto Sans Mono CJK SC', monospace;
- 避免用
font-feature-settings: "tnum";试图启用“表格数字”（tabular figures）——现代等宽字体如 Roboto Mono 默认就是 tnum，加了反而可能干扰渲染
字体加载后数字重绘抖动（FOIT/FOUT）
页面刚打开时数字先显示为粗宋体，半秒后突然变细变窄，用户感觉“闪一下”，尤其在仪表盘或实时刷新的计数器上特别明显。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 这不是 bug，是浏览器默认行为：FOIT（Flash of Invisible Text）或 FOUT（Flash of Unstyled Text）。用
font-display: swap可强制 FOUT，但得接受短暂样式不一致 - 更稳的做法是加一层骨架占位：
.number { font-family: monospace; /* fallback */ }<br>.number.loaded { font-family: 'Roboto Mono', monospace; }然后 JS 监听document.fonts.load()成功后再加loaded类 - 注意：CSS 中写
font-weight: 300却只引入了400字重的 Roboto Mono，浏览器会模拟加粗，导致数字笔画发虚——务必核对 Google Fonts URL 中的wght@300;400;700参数是否匹配实际使用需求
移动端 Safari 对 font-display: swap 的兼容性坑
iOS 15 以下 Safari 不支持 font-display，即使写了 swap，也会按默认策略（FOIT）处理，导致数字长时间空白，尤其弱网下卡顿明显。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
font-display做唯一方案；对关键数字区域（如价格、进度值），用font-familyfallback 到系统等宽字体保底：font-family: 'Roboto Mono', -apple-system, BlinkMacSystemFont, 'Segoe UI', monospace;
- 可检测
document.fontsAPI 是否存在，再决定是否走 JS 加载逻辑；iOS 14.5+ 才完整支持document.fonts.load - 测试时务必关掉 Wi-Fi 用蜂窝网络跑一遍，Safari 的字体加载超时阈值比 Chrome 高得多，容易掩盖问题
字体加载不是“加个链接就完事”，真正难的是在不同设备、网络、字体子集间保持数字的宽度稳定和视觉节奏一致。最容易被忽略的，其实是 fallback 字体链里那个不起眼的 monospace——它才是最后守门员。
