最稳妥方式是在<head>中用Google Fonts官网生成的<link>标签加载字体，必须含display=swap防FOIT，中文站应优先选含中文的字体如Noto Sans SC。
直接在 <head> 里加 <link> 是最稳妥的方式
谷歌字体不支持本地 npm 安装或 CDN 代理后直引 CSS 文件路径，必须通过官方 <link> 标签加载。手动拼 URL 容易出错，推荐用 Google Fonts 网站生成的代码。
操作步骤：
- 打开 fonts.google.com，选中需要的字体（比如
Inter或Roboto） - 点击右下角 “Embed” 标签页，复制里面的
<link>代码（不是@import） - 粘贴到
index.html的<head>内，位置尽量靠前（避免 FOIT / FOUT 加剧）
示例（引用 Inter 正常字重）：
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
display=swap 必须加上，否则文字会空白等待
默认情况下，浏览器会阻塞文本渲染，直到字体文件下载并解析完成（FOIT），导致页面出现长时间空白。加 display=swap 后，系统字体先显示，新字体就绪后自动替换（FOUT），体验更可控。
立即学习“前端免费学习笔记（深入）”；
常见错误写法：
- 漏掉
&display=swap—— 页面首屏文字可能消失 1–3 秒 - 写成
&display=block或&display=fallback—— 对普通网站收益不大，且兼容性略差 - 多个字体合并在一个请求但没加
display参数 —— 只要任一字体没加，整个链接都按默认策略处理
中文网页慎用 font-display: swap 配合英文字体做 fallback
如果你的 CSS 中写了 font-family: 'Inter', sans-serif，而页面大量显示中文，要注意：Inter 不含中文字符，浏览器会逐个回退到系统字体。此时 swap 会让中文先以系统字体（如 PingFang / Noto Sans CJK）闪现，再“跳变”成另一个 sans-serif 字体，视觉割裂感明显。
建议做法：
- 中文为主站点，优先选含中文的字体（如
Noto Sans SC、Source Han Sans），再加display=swap - 若必须混用（如英文标题用 Inter，正文用中文字体），把字体声明拆开：
h1 { font-family: 'Inter', sans-serif; } body { font-family: 'Noto Sans SC', sans-serif; } - 避免全局设
font-family: 'Inter', 'Noto Sans SC', sans-serif—— 浏览器会尝试用 Inter 渲染中文，失败后才换，反而多一次匹配开销
本地开发时字体加载失败？检查是否被广告屏蔽插件拦截
很多用户装了 uBlock Origin、AdGuard 等插件，默认屏蔽 fonts.gstatic.com 域名（误判为广告资源）。现象是：页面正常加载，但字体始终不生效，开发者工具 Network 面板里 css2? 请求显示 Blocked by extension。
临时验证方法：
- 用无痕窗口打开
index.html（禁用所有扩展） - 或在插件设置中放行
*://fonts.gstatic.com/*和*://fonts.googleapis.com/* - 不要改代码去绕过 —— 生产环境用户也有同样问题，得靠用户侧解决或换字体方案
真要规避插件拦截，只能放弃 Google Fonts，改用 self-hosted 字体（需注意版权和 WOFF2 格式转换），但这已超出 index.html 引用范畴了。
