:lang()伪类生效前提为元素必须具有符合BCP 47规范的lang属性（如zh-CN、ja-JP）；未设置或值非法则无法匹配，动态JS修改document.documentElement.lang在Safari等浏览器中无效，需服务端注入或显式声明。
:lang() 伪类能生效，前提是 HTML 元素必须带合法的 lang 属性，且值符合 BCP 47 规范（如 zh-CN、ja-JP、en-US）；浏览器不看内容是不是中文，只认这个属性。
为什么写了 :lang(zh) 却没换字体？
最常见原因是 HTML 根节点或目标元素根本没设 lang。比如 <p>你好</p> 没加 lang="zh"，哪怕页面全是中文，:lang(zh) 也完全不匹配。
-
<html lang="zh-CN">是必须的——它让所有子元素默认继承该语言，:lang(zh)才能捕获到 - 局部切换语言时，得在具体元素上显式写
<p lang="ja">こんにちは</p>，不能只靠 JS 动态改document.documentElement.lang，Safari 会忽略这种动态变更 -
[lang="zh"]和:lang(zh)行为不同：[lang="zh"]要求值完全相等，:lang(zh)是前缀匹配（zh-CN、zh-Hans都算），推荐优先用后者
:lang() 字体声明怎么排才不翻车？
直接堆砌中日韩字体进全局 body 的 font-family，会导致英文段落被套用中文字体，标点错位、字重发虚。正确做法是按语言拆开声明。
- 中文优先用
"PingFang SC"（macOS）、"HarmonyOS Sans SC"（鸿蒙）、"Noto Sans SC"（跨平台），再 fallback 到通用无衬线体 - 日文需单独配
"Yu Gothic"或"Hiragino Kaku Gothic Pro"，它们对假名渲染更准，不能和中文共用同一组字体列表 - 写法示例：
:lang(zh) { font-family: "PingFang SC", "Noto Sans SC", sans-serif; } :lang(ja) { font-family: "Yu Gothic", "Hiragino Kaku Gothic Pro", sans-serif; } :lang(en) { font-family: system-ui, -apple-system, sans-serif; } - 避免用
SimSun这类旧字体——OpenType 特性缺失，遇到引号、连字、字距微调全失效
多语种字体加载时的闪动与兼容性坑
用户切换语言后，若新语种字体用了 font-display: swap，就会出现回退字体 → 新字体闪入的过程。这不是 bug，是机制使然。
立即学习“前端免费学习笔记（深入）”；
- 提前用
<link rel="preload" as="font">加载关键语种字体资源，比如:lang(zh)和:lang(en)对应的@font-face - 确保不同
:lang()规则引用的@font-face的font-family名互不冲突（例如都叫"BaseFont"就会复用缓存但套错字形） - Safari 对
:lang()更严格：要求lang属性必须出现在目标元素自身或其任意祖先上，且不能是 JS 插入的——服务端直出或构建时注入最稳 - Android WebView 和 iOS Safari 对
zh-Hans/zh-CN的返回不一致，所以:lang(zh)和:lang(zh-CN)建议同时写
真正容易被忽略的是：字体 fallback 不是“越多越好”，而是“按语言精准分层”。混排场景下，一个标点符号用错字体，就可能破坏整行视觉节奏。别依赖系统自动 fallback，每个 :lang() 块都要独立控制字体栈。
