必须用官网生成的完整标签，含rel="stylesheet"和&display=swap；font-family须加引号；仅加载实际字重；中文推荐本地托管。
复制官网生成的完整 <link> 标签，别手敲 URL
fonts.google.com 生成的链接含严格编码规则：css2 路径、family 参数已 URL 编码（如 Inter:wght@400;600）、&display=swap 必须在末尾且 & 是 HTML 实体。手敲漏一个字符（比如写成 css 或 &display）就会 404。
操作路径：选字体 → 点「+ Select this style」→ 右下角点「Embed」→ 切到「」标签页 → 复制整行，包括 rel="stylesheet" 属性。
- 漏掉
rel="stylesheet"：浏览器不解析字体规则，字体完全不生效 - 用旧式 URL（如
https://fonts.googleapis.com/css?family=...）：不支持display参数，也无法精简字重 - 本地用
file://协议打开 HTML：Google Fonts 拒绝加载，控制台报 CORS 错误
font-family 声明必须加引号，且大小写/空格零误差
Google Fonts 返回的字体名是原始命名，比如 Source Code Pro 含空格和大写，Fira Code 中间有空格。CSS 解析器会把没引号的 font-family: Source Code Pro 拆成三个独立字体名 Source、Code、Pro，最终回退到 sans-serif。
正确写法：font-family: 'Source Code Pro', monospace; 或 font-family: "Fira Code", monospace;
- 检查 DevTools 的 Computed 面板：如果
font-family显示为sans-serif或serif，大概率是引号或拼写问题 - 中文字体慎用：Google Fonts 的
zh-CN子集常缺失或渲染异常，建议本地托管思源黑体等开源字体 - 务必设回退字体：
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
只加载实际用到的字重和样式，避免冗余请求
Google Fonts 默认返回全部变体规则。你只用 font-weight: 400 和 700，却写 family=Roboto，它会拉取所有字重 + 斜体 + 所有语言子集，浪费带宽且拖慢首屏。
实操方法：在 fonts.google.com 页面勾选确切需要的字重（如 400、700）和斜体（如需），生成的 URL 自动变成 family=Roboto:wght@400;700 或 family=Roboto:ital,wght@1,400;1,700。
- 多个字体用
|分隔，如family=Inter:wght@400;600|Roboto:wght@400 - 中文项目强烈建议跳过 Google Fonts，改用本地托管的 Noto Sans SC 或思源黑体
- 不要在 CSS 里用
@import引入：它阻塞样式表解析，比<link>更慢，且易触发 FOIT
&display=swap 不是可选项，是防 FOIT 的底线配置
不加 &display=swap，浏览器默认等待字体加载完成才渲染文本，导致首屏长时间空白（FOIT）。加了之后，先用系统字体渲染，字体就绪再替换（FOUT），用户至少能读到内容。
注意：& 是 HTML 实体，不能写成 & 字符；必须出现在 URL 末尾；必须和 rel="stylesheet" 配合使用。
- URL 中
&display=swap写成&display=swap→ 解析失败，字体不加载 - 即使加了
display=swap，若网络极慢，用户仍可能看到两次字体跳变（FOUT） - 字体加载本身不复杂，但细节错一点就会白屏、回退或加载冗余资源——关键是把
&display=swap当成标配，把字重范围当成交互需求来设计
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
