中文项目必须在<head>最上方用<link>引入Google Fonts并带&subset=chinese-simplified，否则中文字形不加载；font-family需加英文双引号且大小写精确匹配；display=swap为必选项以避免FOIT。
直接在 <head> 里加 <link>，别用 @import，中文项目必须带 &subset=chinese-simplified，否则页面里的中文根本不会用上你选的字体。
为什么必须放在<head>最上方、紧贴<html>后？
浏览器解析 HTML 是从上到下流式进行的。<link rel="stylesheet"> 放在 <head> 开头，能让字体 CSS 请求尽早发起，和 HTML 解析并行；如果塞进 <style> 或丢进 <body>，字体资源会延迟加载，首屏文字大概率闪一下（FOUT）或空白 1–3 秒（FOIT）。
常见错误：
- 把官网生成的
@import代码粘进自己的style.css里 —— 渲染阻塞，上线后用户看到白字 - 把
<link>放在<meta>或<title>后面 —— 延迟几百毫秒，弱网下更明显
验证方式：打开 DevTools → Network → 刷新页面，确认 fonts.googleapis.com 请求出现在 document 解析初期，而非 CSSOM 构建完成后。
立即学习“前端免费学习笔记（深入）”；
中文项目不加&subset=chinese-simplified会怎样？
Google Fonts 默认只加载 latin 字符集（英文字母、数字、标点），哪怕你在 CSS 里写了 font-family: "Noto Sans SC"，只要 URL 没带 &subset=chinese-simplified，中文字形文件根本不会下载。浏览器只能回退到系统字体，而你完全察觉不到——因为“看起来有字”，只是不是你选的那个字体。
正确写法示例：
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&subset=chinese-simplified&display=swap">
注意：
-
&是 HTML 实体，不能写成&（XHTML/HTML5 中会报错） - 多个子集用逗号分隔：
&subset=chinese-simplified,latin - 别手拼 URL，务必从 fonts.google.com 选好字体后点「Embed」复制官方链接
font-family值不加引号或大小写错，CSS就失效
CSS 解析器遇到空格、连字符或大小写混用的字体名时，会把它拆成多个独立标识符。比如 font-family: Noto Sans SC 被当成三个字体： Noto、Sans、SC，整个声明被忽略，浏览器走默认字体。
必须加英文双引号，且大小写精确匹配官网定义：
- ✅ 正确：
font-family: "Noto Sans SC", sans-serif; - ❌ 错误：
font-family: Noto Sans SC, sans-serif; - ❌ 错误：
font-family: "noto sans sc", sans-serif;（大小写不匹配） - ✅ 中文字体同理：
"Ma Shan Zheng"、"Zhi Mang Xing"都要加引号
常见踩坑点：复制字体名时多了一个全角空格，或把 SC（Simplified Chinese）写成 zh-CN 或漏掉 —— 这些都会导致字体加载失败。
display=swap不是可选项，是必填参数
&display=swap 控制字体加载行为：让浏览器先用系统字体渲染文本，等自定义字体下载完成再替换。没有它，用户可能面对几秒空白（FOIT），尤其在移动端 3G 网络下。
性能影响很实际：
- 有
display=swap：文字立即可见，最多一次字体切换（FOUT） - 没这个参数：文字延迟出现，用户可能误以为页面卡死
- 部分字体（如
Inter、Roboto）本身不含中文，强行用于中文正文会导致大量字符 fallback，此时display=swap更关键
不要依赖 document.fonts.load() 手动控制——它只在字体已声明且加载中才有效，而 display=swap 是浏览器原生支持、零 JS 依赖的方案。
真正容易被忽略的是：字体是否含中文、URL 是否带子集、font-family 是否加引号这三者必须同时成立，缺一不可。哪怕只漏一个，你写的那行 font-family 就等于没写。
