应使用标签引入Google Fonts，避免@import；必须加引号匹配font-family精确名称；中文项目需显式指定subset=chinese-simplified；可用document.fonts.load()检测加载状态。
直接在 里加 Google Fonts 官网生成的 <link>，别用 @import，也别手拼 URL——这是唯一靠谱的起步方式。
为什么必须用 而不是 @import
@import 会阻塞 CSSOM 构建，导致字体请求被延迟，首屏文字大概率出现 1–3 秒空白（FOIT）。而 <link> 让浏览器在 HTML 解析早期就并行发起字体请求，配合 display=swap 可立即用系统字体渲染，等下载完再替换。
- 常见错误：把官网给的
@import代码直接粘进自己的style.css里 - 后果：开发时看着正常，上线后用户首屏白屏或文字闪动（FOUT）明显
- 验证方法：打开 DevTools → Network → 刷新页面，看
fonts.googleapis.com请求是否在document开始解析时就已发出
中文项目必须加 &subset=chinese-simplified
Google Fonts 默认只加载 latin 字符集（英文字母、数字、标点），哪怕你写了 font-family: "Noto Sans SC"，不加子集参数，中文字符根本不会被下载——浏览器回退到系统字体，但你完全没意识到。
- 正确写法：
https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&subset=chinese-simplified - 多个子集用逗号分隔：
&subset=chinese-simplified,latin - 错误写法：
&subset=chinese或漏掉subset参数 - 注意：
Noto Sans SC和Source Han Sans是含简体中文的，Inter、Roboto等不含中文，不能直接用于中文正文
font-family 值必须带英文双引号
只要字体名含空格、连字符或大小写字母混用，就必须用英文双引号包裹，否则 CSS 解析失败，整个声明被忽略，浏览器走默认字体。
SerpApi Flights (Google Flights)
下载
通过 SerpApi 查询 Google Flights，获取航班时刻表、价格及舱位等级信息。当用户询问航班 / 机票 / 航班价格、时刻表或对比信息时使用。
- 正确：
font-family: "Noto Sans SC", sans-serif; - 错误：
font-family: Noto Sans SC, sans-serif;（解析为三个独立字体名：Noto、Sans、SC） - 大小写敏感：
"IBM Plex Sans"≠"ibm plex sans" - 中文字体同理：
"Ma Shan Zheng"、"Zhi Mang Xing"都要加引号
预加载关键字体可进一步减少 FOIT 风险
对首页 <h1></h1> 或品牌标语这类核心文本用的字体，可在 <link rel="preload"> 提前拉取，尤其在弱网环境下效果明显。
- 写法示例：
<link rel="preload" href="https://fonts.gstatic.com/s/notosanssc/v30/KTUgxbXn9oL8eQ6jGq4fY3z8B5kSj6w.woff2" as="font" type="font/woff2" crossorigin> - 注意：
href必须是字体文件真实路径（从 Network 面板复制），不是 CSS 接口地址 - 必须加
crossorigin属性，否则字体加载会被 CORS 拦截 - 建议搭配
<link rel="preconnect">提前建立与fonts.gstatic.com的连接
最易被忽略的是：字体声明顺序和 fallback 逻辑。比如把 "Inter" 放在 "Noto Sans SC" 前面用于中文页面，浏览器会先尝试用 Inter 渲染每个汉字，失败后再换，白白多一次匹配开销，还可能引发短暂字形错位。真正要用好，得按内容语言分层声明，而不是堆在一行里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
