最简写法是直接在<head>中添加<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">，需确保URL含css2路径、精确字重、&display=swap（&为HTML实体），CSS中用font-family: 'Inter', sans-serif;调用并加引号。
link标签引入Google Fonts最简写法
直接在 <head> 里加一行 <link> 就能用，不需要下载或配置服务器。Google Fonts 提供的 URL 已经是预处理过的 CSS + 字体文件组合，浏览器会自动加载对应字体。
比如引入 Inter 字体的常规字重：
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
注意几个关键点：
-
family=Inter是字体名，大小写敏感；wght@400;500;600;700表示只加载这四个字重，减少请求体积 -
&display=swap必须带上——它让文本先用系统字体渲染，等字体加载完再替换，避免“空白闪烁”（FOIT） - URL 中的
css2是当前稳定接口，别用老的css路径，后者不支持可变字体和部分新参数
如何在CSS中正确调用link引入的字体
link 只是加载字体资源，真正生效靠 CSS 的 font-family 声明。必须用字体的“发布名”（不是文件名或显示名），且建议 fallback 到系统字体。
立即学习“前端免费学习笔记（深入）”；
例如 Google Fonts 页面上显示 “Inter”，但实际应写成：
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
常见错误：
- 写了
font-family: Inter;（没加单引号）——当字体名含空格或特殊字符时会失效，即使叫Inter也建议加引号保持一致性 - 只写
'Inter'不带 fallback ——字体加载失败时页面文字直接不可读 - 在
@font-face里重复定义同名字体——link 加载的 CSS 已包含完整@font-face规则，手动再写可能冲突
国内访问 Google Fonts 慢或失败怎么办
Google Fonts 在国内 DNS 解析常超时或返回空响应，不是网络问题，是域名被干扰。不能靠换 CDN 或代理解决，得换源。
推荐两个可用方案：
- 用 腾讯 Fonts CDN：把 URL 中的
fonts.googleapis.com换成fonts.gtimg.cn，其他参数不变。例如：https://www.php.cn/link/15bae4db37de1a26a3fa3523980c2546/css2?family=Inter:wght@400&display=swap - 用 jsDelivr 镜像（更稳定）：改用
https://cdn.jsdelivr.net/npm/@fontsource/inter@4.2.12/index.css这类路径，但需注意这是 Fontsource 方案，要按其文档指定字重参数，不是所有 Google Fonts 字体都覆盖全 - 不推荐本地托管：字体文件多、格式杂（woff2/woff）、版本更新麻烦，除非有强合规要求
为什么用了link还是看不到字体？排查顺序
不是代码写错，就是加载链路上某环断了。按这个顺序查：
- 打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 找到那个
css2?...请求 → 看状态码是不是200，响应内容是不是 CSS 文本（含@font-face） - 如果请求失败（404/timeout），说明 URL 有误或 CDN 不可达；如果返回 200 但内容为空，大概率是地区限制，换腾讯或 jsDelivr 源
- 请求成功后，检查 Elements 面板里元素的 computed 样式，看
font-family是否命中，以及font-style/font-weight是否匹配你引入的字重（比如用了font-weight: 800却只引入了 400–700） - 最后确认字体是否被其他 CSS 覆盖（比如某个
div上写了font-family: monospace !important）
第三方字体不是“写了就能用”，关键是请求通、参数对、CSS 匹配准——三者缺一不可。
