CSS变量不能动态切换字体族，真正生效需靠选择器匹配lang属性并直接声明完整font-family；变量仅适合管理行高、字重等共用属性，字体名必须硬编码且末尾带通用族名。
CSS变量本身不能“动态切换”字体族，它只是静态引用；真正起效的切换动作必须落在 font-family 声明本身上，且需配合选择器作用域控制。
为什么直接改 :root 变量不生效
很多人写完 :root { --font-body: "Inter", sans-serif; }，再用 JS 执行 document.documentElement.style.setProperty('--font-body', '"Noto Sans SC", sans-serif')，却发现页面字体没变。这不是 JS 没执行，而是浏览器根本不会重新解析已计算过的 font-family: var(--font-body) 值——var() 在样式计算阶段就求值完毕，后续变量变更不触发重排或字体重载。
- 即使变量值变了，
getComputedStyle(el).fontFamily仍返回旧结果 -
@font-face中完全不能用变量，所有font-family字符串必须硬编码 - 想靠
:lang(zh) { font-family: var(--font-zh); }自动响应语言切换？浏览器会忽略整条规则
正确做法：用属性选择器批量覆盖 font-family
把“切换”这件事从 JS + 变量改成纯 CSS 的选择器匹配。核心是让 HTML 根节点带明确的 lang 属性，并在 CSS 中用 [lang="zh-CN"] 这类选择器直接声明完整字体栈。
- 确保 HTML 有显式语言属性：
，切换时只改这个值 - CSS 写法必须包含完整字体链，不能只靠
var()：html[lang="zh-CN"] body, html[lang="zh-CN"] p { font-family: "Noto Sans SC", "PingFang SC", system-ui, sans-serif; } - 别用
:lang(zh)—— 它不保证匹配到根元素，且兼容性差；[lang="zh-CN"]是稳定、可预测的选择器 - 如果要支持简繁自动区分，额外加一条：
html[lang="zh-Hant"] body { font-family: "Noto Sans TC", "PingFang HK", system-ui, sans-serif; }
字体变量只适合复用非字体名的值
你可以用 CSS 变量管理行高、字重、字间距这些跨语言共用但需微调的属性，但字体族名本身不适合“存进变量再取出来”。变量在这里的作用是组织，不是代理。
- 推荐这样用：
html[lang="ja-JP"] { --line-height: 1.65; --font-main: "Yu Gothic", "Noto Sans JP", system-ui, sans-serif; font-family: var(--font-main); } - 变量名如
--font-main纯属语义约定，换--font-jp也一样有效 - 所有字体栈末尾必须带通用族名（
sans-serif等），否则 fallback 失效 -
system-ui必须放在自定义字体之后、通用族名之前，否则 macOS 和 Windows 渲染不一致
真正容易被忽略的是：字体切换不是“改一个值就完事”，它牵扯预加载、font-display 策略、unicode-range 切割、甚至文本容器的 line-height 一致性。变量只是让 CSS 更易维护，不是魔法开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
