CSS变量需配合HTML的lang属性才能实现多语言适配，:lang()选择器仅匹配显式声明的lang值，变量须定义在:lang(x)或:root作用域下才可继承，字体栈需按语言预定义并加引号。
CSS变量本身不能自动识别语言，必须配合lang属性手动声明才能触发适配逻辑——没有lang，所有:lang()规则和变量切换都无效。
必须在HTML上显式设置lang属性
浏览器不会根据文本内容自动推断语言，:lang()选择器只匹配真实存在的lang属性值。
- 错误写法：
<html><p>Hello world</p></html>→:lang(en)完全不生效 - 正确写法：
<html lang="en"><p>Hello world</p></html>或嵌套：<p lang="zh">你好</p><p lang="ar">مرحبا</p> - 服务端渲染时，务必把用户语言映射为
lang值（如zh-CN、ar-SA、he-IL），不要用locale或i18n类名代替
:lang()只能作用于:root或html才有效
变量作用域是关键。把语言相关变量写在body:lang(zh)或.content:lang(zh)里，子元素根本继承不到。
- ✅ 有效：
:lang(zh) { --line-height: 1.8; --text-spacing: 0.04em; }（等价于html:lang(zh)） - ❌ 无效：
body:lang(zh) { --line-height: 1.8; }→ 变量只在body作用域，p、li等后代无法访问 - 变量名统一用无单位数值，比如
--line-height: 1.8，不是--line-height: 1.8em；否则字体缩放时行高会失准
字体栈必须按语言单独定义，不能复用:root预设值
你不能先在:root设一个--font-main，再指望:lang(ar)去覆盖它——CSS变量不支持“覆盖”，只支持“同作用域重定义”。
立即学习“前端免费学习笔记（深入）”；
- 每个
:lang(xxx)块必须包含完整font-family声明，例如：:lang(ar) { --font-main: "Tajawal", "Cairo", system-ui, sans-serif; font-family: var(--font-main); } - 中文字体名必须加双引号：
"Noto Sans SC"，否则编译后解析失败 - RTL语言（阿拉伯语、希伯来语）必须搭配逻辑属性使用，仅靠
direction: rtl不够；margin-inline-start比margin-left更可靠
避免混排时的继承污染
一段中文段落里嵌了一小段英文，如果只靠根级:lang(en)，可能被父级:lang(zh)的变量覆盖。这时需分层控制：
- 全局基础变量用
:root+:lang()设置默认值 - 局部混排用显式
lang属性+更具体选择器微调，例如：p[lang="en"] { line-height: var(--line-height-en, 1.6); } - 不要依赖
inherit或unset来回退，直接给明确回退值，比如var(--line-height-en, 1.6)
最易被忽略的一点：字体栈顺序决定fallback行为，中日韩文字必须把对应字体放在最前，否则系统会用拉丁字体渲染汉字，造成方块或乱码；而这个顺序无法靠变量动态拼接，只能靠预定义键名（如--font-zh、--font-ja）配合var()引用实现。
