最稳妥的 Google Fonts 加载方式是使用 <link rel="stylesheet"> 并带 &display=swap 参数，确保 FOUT 体验、精简字重、正确转义 URL 中的 &，中文项目建议本地托管。
直接用 <link> 加载 Google Fonts 是最稳妥的方式
绝大多数场景下，<link rel="stylesheet"> 是首选方案——它不依赖 JS，兼容 IE9+，且浏览器能并行预加载字体 CSS，比 @import 或 JS 动态加载更早触发字体请求。
href 地址里必须带 &display=swap
不加这个参数，文字会先空白（FOIT），等字体下载完才显示；加了之后，浏览器会先用后备字体渲染，等字体就绪再无感替换（FOUT），体验更可控。
- 正确写法：
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> - 错误写法：
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">（旧 API，不支持字重精简） -
&是 HTML 实体，不是&字符；URL 中的&必须转义为&，否则解析失败
只加载实际用到的字重和样式，别全量引入
Google Fonts 默认会返回所有可用变体的 @font-face 规则，哪怕你只用 font-weight: 400。多加载的 CSS 和字体文件会拖慢首屏。
- 查清项目中真正用到的组合：比如
Roboto只用了常规体（400）和粗体（700），斜体完全没用 → 就写family=Roboto:wght@400;700 - 避免写
family=Roboto这种裸名，它会拉取全部字重 + 斜体 + 所有语言子集 - 中文项目慎用 Google Fonts：它对简体中文支持极弱，
zh-CN子集往往缺失或渲染异常，建议本地托管或换用思源黑体等开源字体
字体名在 CSS 中必须加引号，且注意大小写和空格
Google Fonts 返回的字体名是原始命名，比如 Open Sans 中间有空格，Source Code Pro 含空格和大写。CSS 解析器对这类名字很敏感。
- 必须写成：
font-family: 'Open Sans', sans-serif;或font-family: "Source Code Pro", monospace; - 不能写成：
font-family: Open Sans, sans-serif;（会被解析为两个独立字体名Open和Sans） - 检查 DevTools 的
Computed面板里font-family是否生效，如果显示为serif或sans-serif，大概率是引号或拼写错了
&display=swap 当成标配，把字重范围当成交互需求来设计，而不是“先加上再说”。 
