直接用 :lang(zh) 重写字体变量行不通，因为 :lang() 伪类不支持动态重赋值 css 变量，且修改变量后 font-family 不会自动重新解析；正确做法是用 [lang="zh-cn"] 等属性选择器直接声明字体链。
为什么直接用 :lang(zh) 重写字体变量行不通
很多人试过在 :lang(zh) 里写 font-family: var(--font-zh)，发现切换语言后字体没变——根本原因是 :lang() 伪类不支持在声明块里使用 CSS 变量做“动态重赋值”。它只能应用静态样式，var(--font-zh) 的求值发生在计算阶段，而 :lang() 匹配本身不触发变量作用域重绑定。
更实际的问题是：即使你写了 html:lang(zh) { --font-zh: "PingFang SC", sans-serif; }，这个新变量值也不会自动向下继承到所有文本元素的 font-family 计算中，因为变量作用域链和继承规则不匹配。
-
:lang()是匹配机制，不是作用域容器；它不能“注入”新变量值到后代元素的计算上下文 - 浏览器对
:lang()中修改:root变量的支持极差，Chrome 和 Safari 表现不一致，Firefox 基本不生效 - 即便变量改了，
font-family不会自动 re-resolve，得靠强制重排（比如改line-height）才可能触发，但不可靠
正确做法：用 [lang="zh-CN"] 配合预设变量批量覆盖
把语言逻辑从“运行时计算”转为“静态声明”，用属性选择器精准命中带 lang 属性的元素，再统一设置字体链。这不是重写变量，而是绕过变量、直接声明。
实操要点：
- 确保 HTML 元素有显式
lang属性：或<p lang="ja-JP"></p>，:lang()不会继承，[lang]会匹配该属性本身 - 在 CSS 中写完整选择器链：
html[lang="zh-CN"] body, html[lang="zh-CN"] p, html[lang="zh-CN"] h1 { font-family: "Noto Sans SC", "PingFang SC", system-ui, sans-serif; } - 别省略地区码：
[lang="zh"]不等于[lang^="zh"]，前者只匹配字面值lang="zh"，后者可能误中非法值如lang="zhx" - 如果项目用 i18n 库（如 Vue I18n），必须在初始化后立刻执行
document.documentElement.lang = locale.value，否则选择器无匹配目标
document.documentElement.style.setProperty() 切换变量的时机陷阱
有人想“曲线救国”：先用 JS 改 --font-zh，再靠全局 font-family: var(--font-zh) 生效。但问题在于——改完变量，页面不会立刻重绘字体，getComputedStyle(el).fontFamily 拿到的还是旧值，且部分字体回流被浏览器延迟合并。
关键事实：
- CSS 变量更新是异步的，不触发 layout，也不触发字体加载校验
- 即使字体文件已缓存，系统字体列表变更（如用户装了新字体）也不会被重新探测
- 在
requestAnimationFrame回调里读取fontFamily仍可能拿到 fallback 值，因为字体匹配发生在 paint 阶段后期 - 真正安全的做法是：变量只用于“预设分组”，语言切换由
[lang]触发样式重应用，而非依赖变量重计算
简繁体共用 --font-zh 但需额外覆盖的细节
简体与繁体属于同一语系，--font-zh 可复用，但字形渲染差异大，不能只靠一个变量兜底。必须用 [lang="zh-Hant"] 单独覆盖字体链中的中文字体项。
例如：
html[lang="zh-Hans"] {
--font-zh: "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
}
html[lang="zh-Hant"] {
--font-zh: "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
}
body {
font-family: var(--font-zh);
}
注意点：
-
system-ui必须放在自定义字体之后、sans-serif之前，否则 macOS 和 Windows 渲染顺序不一致 - 不要在
[lang="zh-Hant"]里只写"Noto Sans TC"就完事——缺字时会跳过整个链，直接 fallback 到sans-serif（可能是 Helvetica），导致繁体字显示异常 - 如果用了
@font-face+unicode-range，繁体字体的unicode-range必须包含 U+3000–U+303F（中文标点）、U+4E00–U+9FFF（基本汉字）等区块，否则加载无效
最易被忽略的是：字体切换后，line-height 和 letter-spacing 在不同字体下视觉高度不一致，尤其简繁混排时，必须用 [lang] 单独控制这些值，不能只靠变量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
