CSS变量不能自动识别中英文，必须用@font-face+unicode-range显式切分字体：先声明独立英文字体（如Inter）和中文字体（如Noto Sans SC），分别配不重叠的unicode-range（英文U+000-U+FF等、中文U+4E00-U+9FFF等），再通过CSS变量统一控制font-family顺序，确保英文优先匹配、中文fallback正确，避免混排错位。
CSS变量本身不能自动识别中英文并分别应用字体族——必须靠unicode-range手动切分，否则中文会 fallback 到英文字体里糊掉的“e”或“1”上。
为什么直接写 font-family: "Inter", "Noto Sans SC", sans-serif 会失效
这种写法看似合理，实则埋了三个坑：
- 浏览器按顺序匹配字体族，一旦
"Inter"声明支持中文（哪怕只是伪支持），后续"Noto Sans SC"就完全不会被调用； - 多数西文字体（如 Inter、SF Pro）在 font-face 中未声明
unicode-range，导致其字形表被默认视为覆盖全部 Unicode 区段； - 中英文混排时，若英文字符被塞进中文字体（比如“Hello 你好”里的 Hello 走了 Noto Sans SC），笔画粗细、x-height、字宽全错位，视觉割裂。
正确做法：用 @font-face + unicode-range 显式隔离
核心是把中、英、数字、标点拆成独立 font-face 声明，再统一用 CSS 变量控制开关。例如：
@font-face {
font-family: "body-font-en";
src: url("/fonts/inter-var.woff2") format("woff2");
unicode-range: U+000-U+FF, U+100-U+49F, U+2000-U+206F, U+20A0-U+20CF;
}
<p>@font-face {
font-family: "body-font-zh";
src: url("/fonts/noto-sans-sc.woff2") format("woff2");
unicode-range: U+4E00-U+9FFF, U+3400-U+4DBF, U+20000-U+2A6DF, U+2A700-U+2B73F;
}</p><p>:root {
--font-en: "body-font-en", sans-serif;
--font-zh: "body-font-zh", sans-serif;
--font-body: var(--font-en), var(--font-zh);
}关键点：
立即学习“前端免费学习笔记（深入）”；
-
unicode-range必须精确——U+4E00–U+9FFF 是最常用汉字区，但缺了全角标点（U+3000–U+303F）和常用符号（U+FE10–U+FE1F），会导致「，。！？」显示为方框； - 不要省略西文的
U+2000-U+206F（各种空格、破折号、省略号），否则「—」和「…」可能 fallback 到系统字体； -
--font-body里先写var(--font-en)，确保英文优先走西文字体，中文才触发 fallback 到--font-zh。
切换逻辑必须绑定到根节点，且避免重绘抖动
很多人在 class 切换时改body或html的font-family，结果整页重排。正确姿势是只动:root变量：
:root[data-lang="en"] {
--font-en: "Inter", sans-serif;
--font-zh: "Noto Sans SC", sans-serif;
}
<p>:root[data-lang="ja"] {
--font-en: "Inter", sans-serif;
--font-zh: "Noto Sans JP", sans-serif;
}</p><p>/<em> 所有文本元素统一继承 </em>/
p, h1, li, button {
font-family: var(--font-body);
}这样切换只需 JS 执行：document.documentElement.setAttribute('data-lang', 'ja')，CSS 变量自动响应，无 layout thrashing。
注意：data-lang 值必须与实际语言环境一致，否则unicode-range隔离失效——比如设成zh却加载日文字体，汉字仍会走西文字体。
容易被忽略的兼容性雷区
不是所有浏览器都老老实实按unicode-range切字体：
- Safari 15.4 之前版本对
U+20000-U+2A6DF（扩展 A 区）支持不全，部分生僻汉字仍 fallback； - Android WebView（尤其旧版 Chrome 内核）会忽略
unicode-range，直接走第一个font-family，所以src顺序不能错； - 字体文件若没做子集化，
noto-sans-sc.woff2可能含 6 万字，首屏加载卡顿——必须用pyftsubset或 Fontsource 的 subset 参数裁剪到实际用字范围。
最终效果是否生效，最简单的验证方式是打开 DevTools → Elements → 选中一段中英文混排文字 → 看 Computed 面板里的 font-family 值，以及下方 Rendered Fonts 明确列出中、英文分别走了哪个字体文件。
