国内无法稳定访问fonts.googleapis.com导致字体加载失败、foit等问题，应替换为中科大镜像等可用cdn，并确保使用display=swap参数和正确引号包裹含空格字体名。
直接用 <link> 标签引入 Google Fonts 的 CSS 是最可靠的方式，但国内访问 fonts.googleapis.com 常会超时或 404，必须换镜像源或本地化处理。
为什么不能直接用官方 CDN 链接
官方域名 https://fonts.googleapis.com 在国内多数网络环境下无法稳定解析或建立连接，表现为字体加载失败、font-family 回退为系统默认字体，甚至触发 FOIT（文字完全不可见）——这不是你 CSS 写错了，是请求根本没发出去。
- 浏览器控制台常出现
net::ERR_CONNECTION_TIMED_OUT或Failed to load resource -
document.fonts.check()返回false，说明字体未注册成功 - 即使页面渲染了，打开开发者工具的
Application → Fonts面板，看不到对应字体条目
用国内可用的 CDN 替换官方域名
把链接里的 fonts.googleapis.com 换成已验证可用的镜像地址，其余参数保持不变。目前较稳定的有：
-
https://fonts.proxy.ustclug.org（中科大镜像，延迟低，支持css2路径） -
https://fonts.loli.net（LoliNet，兼容性好，但偶尔有缓存不一致） -
https://fonts.googleapis.cnpmjs.org（npm 镜像站，更新及时）
例如原链接：
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
改成中科大镜像后：
<link href="https://fonts.proxy.ustclug.org/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
注意：preconnect 也要同步改，否则预连接失效：
<link rel="preconnect" href="https://fonts.proxy.ustclug.org">
必须加 display=swap 参数
不加这个参数，浏览器会等字体文件下载完成才开始渲染文本，造成明显空白（FOIT）。加了之后，先用系统字体撑开布局，字体就绪后自动替换，体验更自然。
- 参数位置必须在 URL 查询字符串末尾，且用
&连接（HTML 中要写成&） - 不要写成
display=block或display=fallback，只有swap能兼顾性能与可读性 - 如果项目对首屏文字渲染时间敏感（如营销页），这是唯一能接受的方案
字体名带空格时引号不能省
像 Open Sans、Noto Sans SC 这类含空格的字体名，在 CSS 的 font-family 中必须用单引号包裹，否则浏览器识别为两个独立字体，直接降级到 sans-serif。
正确写法：
body { font-family: 'Noto Sans SC', sans-serif; }
错误写法（会被截断）：
body { font-family: Noto Sans SC, sans-serif; }
另外，兜底链里系统字体不用引号也没问题，但统一加上更安全，比如 'Segoe UI'、'Helvetica Neue'。
真正麻烦的不是怎么写，而是字体是否真被加载进来——建议上线前用无痕窗口 + 网络限速（Slow 3G）验证，看文字是否始终可见、是否发生突兀替换。镜像源可能随时失效，最好留一个本地 fallback 方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
