谷歌字体必须使用官方生成的完整URL，含css2路径、URL编码的family值及&display=swap参数；禁用file://协议本地打开，应通过HTTP服务调试；font-family需设回退字体且匹配引用名称。
link href里写错URL路径导致字体不加载
谷歌字体的link标签必须用官方生成的完整URL，不能手动拼接或省略&display=swap这类参数。常见错误是复制了字体预览页的“HTML”代码块但漏掉&family=...后面的编码部分，或者把https://fonts.googleapis.com/css2?写成http://（现代浏览器会直接拒绝加载）。
实操建议：
- 永远从 fonts.google.com 选好字体后，点击「+ Select this style」，再点右上角「Embed」，复制「
」那一整行 - 确认URL中包含
css2（不是css），且family值已URL编码（比如Roboto:400,700会被转为Roboto:wght@400;700） - 不要在
href里加空格、中文或未编码的符号，否则请求404，控制台会报Failed to load resource: the server responded with a status of 404 ()
字体加载时机影响页面渲染和FOIT/FOUT
默认情况下，浏览器会阻塞文本渲染直到字体加载完成（FOIT），造成空白段落；加&display=swap可让系统先用备用字体显示，再替换（FOUT）。但这不是万能解——如果网络极慢，用户可能看到两次字体跳变。
实操建议：
- 务必在
link的URL末尾加上&display=swap，例如：https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap - 避免在
font-family声明里只写谷歌字体名，一定要带回退：比如font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; - 不要在CSS里用
@import引入谷歌字体——它会阻塞整个样式表解析，比link更慢
字体权重和样式没生效的常见原因
写了font-weight: 700但文字还是细的，大概率是引用时没申明对应字重，或者CSS选择器优先级被覆盖。谷歌字体不是“全量加载”，你引用哪几个变体，它才加载哪几个。
实操建议：
- 在fonts.google.com选字体时，勾选需要的字重（如400、700）和斜体（
italic），生成的URL里会自动带上wght@400;700或ital,wght@1,400;1,700 - 检查计算后的
font-family是否匹配：比如引用的是family=Roboto:wght@400;700，那CSS里就得写font-family: 'Roboto';，不能写成'Roboto Regular'或'Roboto-400' - 用Chrome DevTools的Elements面板选中文字，看Computed里的
font-family和font-weight是否如预期，再看Network里fonts.gstatic.com的请求返回状态码是不是200
本地开发时字体突然失效
本地文件用file://协议打开HTML时，谷歌字体会因跨域策略被拒绝加载，控制台报Blocked loading resource from url not allowed by CORS policy。这不是你代码错了，是浏览器限制。
实操建议：
- 别双击HTML文件打开，改用轻量HTTP服务：VS Code装Live Server插件，或命令行运行
npx http-server（需提前npm install -g http-server） - 如果必须离线调试，可下载字体文件（WOFF2）+
@font-face本地引用，但注意许可证——多数谷歌字体允许自托管，但得保留版权说明 - 别在
link里加rel="preload"试图优化，它对跨域字体支持不稳定，反而容易触发预加载失败警告
真正卡住人的往往不是怎么写link，而是URL编码细节、本地协议限制、以及没意识到字体加载是异步且可被CSS规则覆盖的。多看一眼Network面板里的请求地址和响应头，比反复改CSS快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
