安全引入 google fonts 需用 css2 api（如 https://fonts.googleapis.com/css2?family=roboto:wght@400;700&display=swap），必须含 display=swap、精确字重、html 实体转义，禁用旧 api 和镜像源，中文字体建议本地托管。
直接用 @import 或裸 <link> 引入 Google Fonts 在国内多数会失败，且不加 display=swap 会导致文字长时间空白。安全引入的关键是：绕过网络限制 + 控制加载行为 + 防止解析错误。
为什么 <link href="https://fonts.googleapis.com/css?family=..."> 常常失效
这个旧 API（/css）在 2024 年后已逐步弃用，返回的 CSS 不带 font-display: swap，且默认拉取全部字重和语言子集。更关键的是：fonts.googleapis.com 在国内 DNS 解析常超时或被重置，浏览器卡在字体 CSS 请求上，阻塞渲染。
- 常见现象：页面白屏几秒，或文字先闪一下再变样（FOIT → FOUT）
- DevTools Network 面板能看到
fonts.googleapis.com/css?...状态为pending或failed - 即使能通，旧 URL 也不支持
wght@语法，无法精简字重
必须用 css2 API + display=swap 参数
新 API 地址形如 https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap，这是目前唯一能兼顾兼容性、可控性和可用性的写法。
-
css2是强制要求：旧/css不再维护，新字体（如Chakra Petch）只在css2下提供 -
display=swap不可省略：它让浏览器用 fallback 字体先渲染，等字体就绪再无感替换，避免 FOIT -
wght@400;700要写全：只加载实际用到的字重，减少 CSS 体积和字体文件请求数 - URL 中的
&必须 HTML 实体转义为&，否则 HTML 解析器会截断链接
中文项目别信“换源”方案（如 fonts.useso.com）
这类镜像服务早已失效或同步滞后，2025 年起大量返回 404 或旧版 CSS（不含 font-display），且不支持 css2 路径。强行替换只会让问题更隐蔽。
- 检查方式：打开
https://fonts.useso.com/css2?family=Roboto&display=swap，看是否返回有效 CSS - 真实结果：多数返回 404，或返回空内容，或返回未更新的旧规则
- 更稳的替代是本地托管——哪怕只托管
.woff2和一份精简后的@font-face声明
font-family 值必须加引号且大小写敏感
Google Fonts 返回的字体名含空格或大写（如 Open Sans、Source Code Pro），CSS 解析器会把没引号的 font-family: Open Sans 拆成两个字体名 Open 和 Sans，最终回退到 serif。
- 正确写法：
font-family: 'Open Sans', sans-serif;或font-family: "Source Code Pro", monospace; - 错误写法：
font-family: Open Sans, sans-serif;（解析失败） - 验证方法：打开 DevTools → Elements → Computed → 找
font-family，若显示为sans-serif而非你写的字体名，八成是引号或拼写错了
最易被忽略的一点：Google Fonts 对简体中文支持极弱，zh-CN 子集常缺失或渲染异常。如果页面含大量中文，别依赖它——本地托管思源黑体或霞鹜文楷，比调通 Google Fonts 更快也更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
