一个标签用|拼接多个字体更可靠，如family=roboto|open+sans|fira+code，空格须转+，共用&display=swap；多标签易致重复请求、顺序混乱、foit加剧；file://协议下google fonts会因混合内容被拦截，需本地服务或https访问。
直接用一个 <link> 标签拼多个字体，比写多个标签或混用 @import 更可靠、更少出错。
多个字体怎么拼在同一个 <link> 里？
Google Fonts 支持用 | 分隔多个字体族名，URL 中的空格必须替换成 +：
-
family=Roboto|Open+Sans|Fira+Code是合法的，浏览器能正确解析 - 不要写成
family=Roboto Open Sans—— 空格会导致 URL 截断，字体加载失败 - 如果某个字体名含空格（如
Open Sans），必须写成Open+Sans，否则请求 404 - 多个字体共用同一套参数，比如
&display=swap只需写一次，不用重复
为什么别用多个 <link> 标签？
看似清晰，实则容易触发重复请求或顺序竞争：
- 每个
<link rel="stylesheet">都会发起独立 HTTP 请求，增加连接开销 - 浏览器不保证多个字体 CSS 的执行顺序，
font-family: 'A', 'B', sans-serif可能因加载延迟导致回退异常 - CDN 返回的 CSS 文件可能被缓存合并，但多个请求仍可能触发不同版本的字体元数据，造成
font-weight匹配失效 - DevTools 的 Network 面板里能看到多个
css2?family=...请求，而单个请求更易监控和调试
display=swap 必须加，且不能省略
不加 display=swap 时，多个字体叠加会让 FOIT（Flash of Invisible Text）风险翻倍：
- 浏览器默认等待所有字体下载并解析完成才渲染文字，弱网下可能白屏 2 秒以上
-
display=swap让每个字体独立控制显示行为：先用系统字体撑开布局，再异步替换 - 别写成
display=fallback或display=optional—— 前者触发过早回退，后者在首次访问时可能完全不加载字体 - 检查 Chrome DevTools → Application → Fonts，确认列表中每个字体都标有 “loaded” 而非 “pending”
本地调试时字体不生效？先看这三处
本地双击打开 index.html（即用 file:// 协议）时，Google Fonts 会静默失败：
- 浏览器会拦截非 HTTPS 的字体请求，控制台报
Blocked loading resource from url not allowed by CSP或空白错误 - Network 面板里字体请求状态是
(blocked:mixed-content)，不是 404 - 解决方法只有两个：
python3 -m http.server启个本地服务，或改用https://开头的完整 URL（但离线时依然不行） - 真正要离线可用，必须走
@font-face+ 本地文件，不能依赖 Google Fonts 的 CDN 链接
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
