:lang(zh) { --font-main: "noto sans sc", "pingfang sc", system-ui; font-family: var(--font-main); } 才生效，因 var() 静态求值且 :lang() 非作用域容器，须在语种规则内直接声明变量并使用。
为什么:lang(zh)里写font-family: var(--font-zh)不生效
浏览器在解析 CSS 时，var() 是静态求值的——它只看当前作用域下变量的声明值，而 :lang() 是运行时匹配机制，不会触发变量重绑定或样式重计算。哪怕你在 :root 定义了 --font-zh，再在 :lang(zh) 里引用，实际生效的仍是 :root 的原始值；更糟的是，这个值根本不会向下影响到子元素的 font-family 计算链。
常见错误现象包括：切换 document.documentElement.lang = 'zh-CN' 后字体没变、getComputedStyle(el).fontFamily 仍返回英文系统字体、控制台无报错但视觉毫无反应。
-
:lang()不是作用域容器，不能“注入”新变量值 - Chrome/Safari/Firefox 均不支持在
:lang()中靠var()动态切换字体族 - 即使变量值变了，
font-family不会自动 re-resolve，强制重排也不可靠
正确做法：把变量声明落到 :lang() 规则内部
变量不是用来“存字体名”的中转站，而是组织复用值的工具。真正起效的方式，是在每个 :lang() 规则体内直接声明并使用变量，让字体链和语系逻辑强绑定。
:lang(zh) {
--font-main: "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
font-family: var(--font-main);
}
:lang(ja) {
--font-main: "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
font-family: var(--font-main);
}
:lang(en) {
--font-main: system-ui, -apple-system, "Segoe UI", sans-serif;
font-family: var(--font-main);
}
- 每个
:lang()块必须包含完整的font-family声明，var()只是辅助书写，不可省略 - 别在
:root预设--font-main后指望它被覆盖——它不会被覆盖，只会被忽略 - 变量名如
--font-main纯属语义约定，换名不影响功能
更稳妥的方案：[lang="zh-CN"] 替代 :lang(zh)
[lang="zh-CN"] 是属性选择器，行为确定、兼容性好、不依赖语言继承逻辑。它能精准命中带显式 lang 属性的元素，且所有现代浏览器对其支持一致。
实操要点：
- 确保 HTML 根节点有
，且所有动态语言切换都通过document.documentElement.lang = 'ja-JP'设置 - 写完整选择器链：
html[lang="zh-CN"] body, html[lang="zh-CN"] p, html[lang="zh-CN"] h1，避免漏掉深层文本节点 - 别用
[lang^="zh"]这类模糊匹配——可能误中lang="zhx"等非法值 - 地区码不能省：
[lang="zh"]≠[lang="zh-CN"]，前者几乎不匹配任何真实页面
字体切换后闪动（FOUT）和加载失败怎么防
用户点“切换为日语”，document.documentElement.lang = 'ja' 触发新字体加载，若未预处理，就会看到从英文字体 → 日文字体的跳变，甚至短暂方块（□）。
- 用
<link rel="preload" as="font" href="..." crossorigin>提前加载所有目标语种的@font-face资源 - 所有自定义字体的
@font-face必须带font-display: swap，防止 FOIT（Flash of Invisible Text） -
system-ui必须放在自定义字体之后、通用族名（如sans-serif）之前，否则 macOS/Windows 渲染不一致 - 避免单字体依赖：
font-family: "Noto Sans CJK JP"失败就全退，应写成"Noto Sans JP", "Yu Gothic", system-ui, sans-serif
最关键的细节是：变量更新本身不触发字体重绘，font-family 的变更必须靠选择器匹配触发——所以别试图用 document.documentElement.style.setProperty('--font-zh', ...) 曲线救国，那条路走不通。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
