:lang()仅匹配带合法lang属性的元素，真正生效的是后续font-family声明；90%失效源于html标签未正确设置lang，如空值、非法bcp 47码（zh_cn）、xml:lang等，必须用zh-cn等标准格式且大小写规范。
:lang() 本身不设置字体，它只是匹配带 lang 属性的元素；真正起作用的是你紧跟其后的 font-family 声明——但 90% 的“没反应”问题，出在 HTML 的 lang 属性根本没写对，而不是 CSS 写错了。
html 标签必须有合法、非空的 lang 属性
浏览器完全不推断语言，也不看系统 locale 或 Accept-Language。以下全是无效写法：
-
（没lang） -
（空值） -
或（非法 BCP 47 标签） -
（xml:lang在 HTML5 中不触发:lang()）
正确写法示例：、、。大小写不敏感，但下划线格式（如 zh_CN）不被识别。
:lang(zh) 和 :lang(zh-CN) 匹配逻辑不同，别混用
:lang(zh) 是前缀匹配：能命中 lang="zh"、lang="zh-CN"、lang="zh-TW" 等；:lang(zh-CN) 只精确匹配 lang="zh-CN"。Safari 某些版本对子标签解析更严格，:lang(zh) 可能不触发，而 :lang(zh-CN) 更稳。
- 想覆盖所有中文变体 → 同时写：
html:lang(zh)、html:lang(zh-CN)、html:lang(zh-TW)、html:lang(zh-HK) - 要精确控制简体中文 → 用
:lang(zh-Hans)，但前提是你的真这么写了 - 别写
:lang("zh")（引号多余）或:lang(zh-cn)（小写没问题，但括号内值必须和属性结构一致）
font-family 里中英文字体顺序怎么排才不翻车
顺序错了，英文会被强制套用中文字体，字形发虚；西文字体放最前，CJK 字符渲染异常；sans-serif 不放最后，缺字时直接 fallback 到系统默认字体（比如 macOS 的 Helvetica），结果日文/韩文显示方块。
- 每条
:lang()规则里，font-family必须把该语言强支持的字体放在最前面："PingFang SC"（中文）、"Hiragino Kaku Gothic Pro"（日文）、"Malgun Gothic"（韩文） - 西文字体（如
"Inter"、"Segoe UI"）必须放在 CJK 字体之后，绝不能放最前 - 通用 fallback（
sans-serif或system-ui）必须放在最后，且不能省略 - 错误示例：
:lang(zh) { font-family: sans-serif, "PingFang SC"; }→ 英文段落也会被sans-serif覆盖，CJK 字体完全无效
混合内容必须给内联元素加 lang，不能只靠根节点
一段里夹英文术语、日文片假名，或者 <p>Hello世界</p> 这种场景，:lang(zh) 不会自动命中“世界”二字——浏览器只看元素自身或其最近带 lang 的祖先，不会按字符拆分检测。
- 正确做法：
<p>Hello<span lang="zh">世界</span></p> - 动态渲染（React/Vue）时容易漏掉这个细节，建议 SSR 阶段就输出带
lang的内联标签 - 别指望
body * { font-family: ... }这类全局规则兜底，它权重高，反而会压掉:lang()规则
最容易被忽略的不是 CSS 怎么写，而是 HTML 层 lang 是否真存在、是否写对、是否落到具体文本节点上——一旦根节点或内联元素的 lang 缺失或非法，后面所有 :lang() 都是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
