必须用 html[lang] 选择器定义 CSS 变量，因单页面仅一个 html 元素，多个 :root[lang] 规则会覆盖而非并存；变量需绑定真实 DOM 的 lang 状态，JS 仅切换 document.documentElement.lang 即可触发样式重算。
不能在 HTML 的 style 属性里写 CSS 变量，也不能靠多个 HTML 文件各自带一套 :root 来“维护语言版本”——那会彻底失去变量的动态性和复用价值。真正可维护的做法是：把语言差异收口到 CSS 自定义属性上，用 html[lang] 选择器作用域隔离，再配合 JS 控制 lang 属性切换。
为什么不能用多个 :root 块分别定义语言变量？
常见错误是这样写：
:root[lang="zh-CN"] { --text-color: #333; }
:root[lang="en-US"] { --text-color: #222; }
这看似合理，但实际无效——:root 就是 html 元素，而一个页面只有一个 html 标签，它不可能同时匹配两个 [lang] 值。浏览器只会应用最后一条规则（或按层叠顺序覆盖），根本做不到“语言切换时变量自动切换”。
- 变量定义必须绑定到真实存在的 DOM 状态，即
html元素当前的lang属性值 - 所有语言相关变量都得写在
html[lang="xx"]规则块里，而不是伪类或独立:root - 别试图在 JS 里反复调用
document.documentElement.style.setProperty去“模拟语言变量”，那是主题切换逻辑，不是语言适配
html[lang] 选择器怎么正确写 CSS 变量？
必须显式带上 html 标签名，且确保 <html lang="zh-CN"> 已正确设置——这是整个机制的前提。变量定义要放在该选择器内部，例如：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
html[lang="zh-CN"] {
--line-height: 1.7;
--letter-spacing: 0.05em;
--text-align: left;
}
html[lang="ar-SA"] {
--line-height: 1.6;
--letter-spacing: 0;
--text-align: right;
--direction: rtl;
}
-
html[lang^="zh"]可覆盖zh-CN、zh-TW，但不匹配zh-Hans（BCP 47 字符串不同） - RTL 语言如阿拉伯语、希伯来语要单独写，别用通配，避免误伤波斯语等排版细节不同的语言
- 每个变量都建议加 fallback：
line-height: var(--line-height, 1.6);，防止未命中时样式崩塌
JS 切换语言时只改 lang 属性，别动 CSS 变量
切换语言的唯一动作就是设置 document.documentElement.lang，其他交给 CSS 引擎自动响应：
function switchLang(lang) {
document.documentElement.lang = lang;
localStorage.setItem('preferred-lang', lang);
}
- 不要在 JS 里用
setProperty去“同步”变量值——变量已由html[lang]规则定义好了，改lang就触发重计算 - 确保初始
lang值来自navigator.language或localStorage，而不是硬编码在 HTML 里 - 如果用了服务端渲染，务必让服务端输出的
<html lang="xx">和客户端首次 JS 执行前的状态一致，否则会有 FOUC 或闪烁
字体和排版差异大的语言，建议抽离独立 CSS 文件
中日韩英混排、阿拉伯数字对齐、RTL flex-direction 翻转等强依赖语言特性的样式，硬塞进主 CSS 会让文件臃肿、加载慢、调试难。更稳妥的做法是分文件加载：
<link rel="stylesheet" href="fonts-zh.css" data-lang="zh" disabled> <link rel="stylesheet" href="fonts-ar.css" data-lang="ar" disabled>
- 初始只启用当前语言对应的
<link>，其余加disabled属性，阻止预加载 - 切换语言时批量开关：
document.querySelectorAll('link[data-lang]').forEach(link => { link.disabled = link.dataset.lang !== nextLang }); - 务必在
<head>中用<link rel="preload">预加载关键字体，否则即使 CSS 加载了，文字仍会跳变
最易被忽略的是：语言变量必须和真实排版需求对齐——比如中文需要更大的字间距和行高，英文需要紧凑 baseline 对齐，这些不是“视觉微调”，而是阅读体验的基础。光靠 var(--x) 不够，得结合 html[lang] + 分离字体 CSS + fallback 机制，才算真正落地。
