应使用<link>标签引入Google Fonts，避免@import；必须加引号匹配font-family精确名称；中文项目需显式指定subset=chinese-simplified；可用document.fonts.load()检测加载状态。

直接用 <link> 引入，别碰 @import

Google Fonts 官网给的默认方案就是 <link> 标签，这是最稳妥、最高效的方式。浏览器能并行加载字体资源，且支持预加载和字体显示控制（font-display）。而 CSS 里的 @import 会阻塞渲染，还可能触发 FOIT（Flash of Invisible Text）或 FOUT 更不可控。

常见错误是把官网生成的 @import 代码直接粘进自己的 CSS 文件里，结果页面首屏文字长时间空白——这就是典型误用。

• 在 HTML 的 <head> 中插入官网提供的 <link>，例如：

  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">

• display=swap 是关键参数，它让浏览器先用系统字体渲染文本，等字体加载完成再替换，避免白屏
• 不要手动拼接 URL；从 fonts.google.com 选好字体后点「+ Select this style」，再点右下角「Embed」，复制里面的 <link>

font-family 值必须严格匹配，大小写和空格都不能错

Google Fonts 生成的 CSS 里定义的字体族名（font-family）是精确字符串，比如 "Inter"、"Roboto Slab"、"Source Code Pro"。引号不是可选的——有空格或连字符的字体名必须加英文双引号，否则浏览器解析失败，回退到默认字体。

Maverick Google Video Url Analysis

将公开视频URL直接发送给Google Gemini模型进行分析。当Codex需要总结视频、回答视频内容问题或其他用途时使用。

下载

• 正确写法：font-family: "Inter", sans-serif; 或 font-family: "Roboto Slab", serif;
• 错误写法：font-family: Roboto Slab, serif;（缺少引号 → 解析为两个独立字体名）
• 大小写敏感：官网显示为 "IBM Plex Sans"，就不能写成 "ibm plex sans"
• 中文字体如 "Noto Sans SC" 同样要带引号，且不能漏掉 SC（简体中文子集标识）

中文项目慎用无子集的 latin 默认加载

Google Fonts 默认只加载 latin 字符集（英文字母、数字、基础符号），对纯中文页面来说，这会导致字体文件体积浪费（几十 KB），且中文字形根本没加载——你写了 "Noto Sans SC"，但没显式声明 &subset=chinese-simplified，那页面实际只加载了拉丁字母部分，中文仍走系统字体。

立即学习“前端免费学习笔记（深入）”；

• 中文项目务必补上子集参数：

  https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&subset=chinese-simplified

• 多个子集用逗号分隔：&subset=chinese-simplified,latin
• 不加 subset 参数 ≠ 自动包含所有字形；Google Fonts 不提供全量中文字体下载（体积太大），必须主动指定
• 如果用了 display=swap 却发现中文始终不换字体，大概率是子集没配对

本地 fallback 和字体加载状态难调试？用 document.fonts.load() 检查

浏览器是否真把字体加载进来了，光看样式不一定准。尤其在弱网或移动端，字体可能加载超时、被拦截或 CORS 失败，但页面照常渲染——你根本不知道字体没生效。

• 用 JS 主动检查：

  document.fonts.load("400 16px 'Inter'").then(() => {
    console.log("Inter loaded");
  }).catch(() => {
    console.log("Inter failed");
  });

• 这个 API 返回 Promise，可用于做优雅降级，比如加载失败时动态改 body 类名，切换备用 CSS 规则
• 注意：Chrome/Edge 支持良好；Safari 15.4+ 才完整支持 document.fonts，旧版需用 FontFaceSet.check() 替代
• 开发时打开 DevTools → Network 标签页，过滤 googleapis，确认字体 CSS 和 WOFF2 文件返回 200

Google Fonts 看似简单，真正卡住人的往往是子集配置缺失、字体名引号遗漏、或误信 @import 能替代 <link>。这些地方一错，字体就静默失效，连报错都没有。