正确做法是将官网生成的标签粘贴到HTML模板最上方，紧贴后，必须加&subset=chinese-simplified以支持中文，禁用@import；多个字体用|拼接、空格转+，font-family值须加英文双引号且大小写精确匹配。
直接在 `
` 里加 ``，别用 `@import`，中文项目必须加 `&subset=chinese-simplified`，否则页面里中文还是系统字体。
怎么把 Google Fonts 正确塞进 HTML 模板的 `
`
复制官网生成的 ``，粘到模板 HTML 文件的 `
` 最上方（紧贴 `` 后即可），不要塞进 `
常见错误：
- 把官网给的 `@import url(...)` 直接贴进 CSS 文件 → 触发 FOIT，首屏文字白屏 2 秒+
- 手拼 URL，比如写成 `family=Roboto Slab`（空格没转 `+`）→ 请求 404，字体根本加载失败
- 用了 `Noto Sans SC` 却漏掉 `&subset=chinese-simplified` → 只下载了拉丁字母部分，中文照常 fallback 到黑体/微软雅黑
正确示例（含中文子集）：
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&subset=chinese-simplified&display=swap">
font-family 值为什么总不生效
不是字体没加载，而是 CSS 里写的 `font-family` 名字和 Google Fonts 官网显示的**精确字符串不一致**。
必须注意三点：
- 带空格或连字符的字体名，
font-family值**必须加英文双引号**，例如"Noto Sans SC"，不能写成Noto Sans SC（浏览器会当成三个独立字体名） - 大小写敏感：
"IBM Plex Sans"≠"ibm plex sans" - 中文字体后缀不能省：`Noto Sans SC` 中的 `SC` 表示简体中文，漏掉就匹配不到已加载的字形
验证方法：打开 Chrome DevTools → Application → Fonts，看列表里是否出现你写的字体名并标为 “loaded”。
一个模板要集成多个字体，怎么写最稳
用一个 ``，靠 `|` 拼接字体族名，别写多个 `` 标签。
原因很实际：
- 多个 `` 会触发多次 HTTP 请求，增加连接开销
- 浏览器不保证多个字体 CSS 的执行顺序，`font-family: "A", "B", sans-serif` 可能因 A 加载慢、B 先到位，导致意外 fallback
- 每个 `` 都要重复写 `&display=swap`，冗余还易漏
正确写法（空格转 `+`，多个字体用 `|` 连）：
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter%7CNoto+Sans+SC:wght@400;700&subset=chinese-simplified&display=swap">
这样 Inter 和 Noto Sans SC 共享同一套 `display=swap` 行为，加载互不干扰。
本地开发时字体突然不显示了
大概率是双击打开 `index.html`，走的是 `file://` 协议 —— 浏览器会拦截 Google Fonts 的 HTTPS 字体请求，控制台报 Blocked loading resource from url not allowed by CSP 或 Network 面板显示 blocked:mixed-content。
这不是代码错，是协议限制。解决只有两个办法：
- 用本地服务跑：比如终端执行
python3 -m http.server，然后访问http://localhost:8000 - 离线场景必须放弃 CDN，改用
@font-face+ 本地 `.woff2` 文件（需配好 MIME 类型，且 `font-display: swap` 仍要加）
别试图把 `https://` 改成 `http://`，Google Fonts 不提供 HTTP 接口，只会 404。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
