:lang() 仅匹配带合法 lang 属性的元素，不设置字体；生效依赖 html 显式声明符合 bcp 47 的非空 lang 值（如 zh-cn），且字体声明需按语言分组、cjk 字体前置、西文字体后置、通用 fallback 放最后。
:lang() 本身不设置字体，它只负责匹配带 lang 属性的元素；真正起作用的是你跟在后面写的 font-family 声明——但 90% 的“没生效”问题，出在 html 标签没写 lang，或字体顺序错了。
HTML 的 lang 属性必须显式、非空、符合 BCP 47
浏览器完全不推断语言，也不读取系统 locale 或 Accept-Language。以下全是无效写法：
-
（没lang） -
（空值） -
或（非法标签） -
（只认lang，xml:lang在 HTML5 中不触发:lang()）
正确写法示例：
大小写不敏感（zh-cn 和 zh-CN 都行），但下划线格式（如 zh_CN）不被识别。
:lang(zh) 和 :lang(zh-CN) 匹配逻辑不同，别混用
:lang(zh) 是前缀匹配：能命中 lang="zh"、lang="zh-CN"、lang="zh-TW"，但 Safari 某些版本对子标签解析更严格，:lang(zh) 可能不触发，而 :lang(zh-CN) 稳定生效。
想覆盖所有中文变体 → 同时写多个：
html:lang(zh), html:lang(zh-CN), html:lang(zh-TW), html:lang(zh-HK) {
font-family: "PingFang SC", "SF Pro SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
要精确控制简体中文 → 直接用 :lang(zh-Hans)，但前提是你的 真这么写了。
别写 :lang("zh")（引号多余）或 :lang(zh-cn)（小写没问题，但括号内值必须和属性值结构一致）。
字体声明顺序错了，中英文都会翻车
直接写 font-family: "Noto Sans CJK SC", sans-serif 是典型错误：西文字母会被强制套用中文字体，导致字重发虚、标点错位；更糟的是，若用户系统没装该字体，sans-serif 会回退到 Helvetica（macOS）或 Arial（Windows），而这俩对日文、韩文支持极差，结果就是方块。
中日韩必须分开声明：
:lang(zh) { font-family: "SF Pro SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif; }
:lang(ja) { font-family: "Hiragino Kaku Gothic Pro", "Yu Gothic", "Meiryo", "Segoe UI", sans-serif; }
:lang(ko) { font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", "Segoe UI", sans-serif; }
关键点：
- 每条规则里，该语言强支持的字体（如
"PingFang SC"）必须放在最前面 - 西文字体（如
"Segoe UI"）必须放在 CJK 字体之后，绝不能放最前 - 通用 fallback（
sans-serif或system-ui）必须放在最后兜底，绝不能省略
混合内容（如 <p>Hello世界</p>）需为内联元素设 lang
:lang() 不会自动继承或推断——它只看当前元素或其祖先是否显式带有 lang 属性。整段里夹日文，但 p 上没写 lang="ja"，那 :lang(ja) 就不会命中。
正确做法是给具体文字加 lang：
<p>Hello<span lang="ja">こんにちは</span></p>
然后写：
span:lang(ja) { font-family: "Hiragino Kaku Gothic Pro", "Yu Gothic", sans-serif; }
别指望靠父级 让里面的日文自动走日文字体——:lang(ja) 必须匹配到带 lang="ja" 的元素本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
