:lang() 伪类需HTML元素含符合BCP 47的lang属性（如zh-CN）才生效；:lang(zh)匹配所有zh开头值，:lang(zh-CN)仅精确匹配；须在html根节点设默认lang并局部覆盖，配合预加载字体、避免全局混排、处理Safari兼容性及布局抖动。
lang 伪类怎么写才生效
必须确保 HTML 元素带有 lang 属性，且值符合 BCP 47 规范（比如 zh-CN、ja、en），CSS 中的 :lang() 才会匹配。浏览器不解析元素是否“实际显示中文”，只认这个属性值。
-
:lang(zh)匹配lang="zh"、lang="zh-CN"、lang="zh-TW"等所有以zh开头的值；:lang(zh-CN)则只精确匹配lang="zh-CN" - 如果用
<p>你好</p>但没加lang，哪怕页面是中文网页，:lang(zh)也完全不触发 - React/Vue 等框架中动态渲染时，容易漏掉给根节点或文本容器补
lang，建议在上设默认值，再局部覆盖
中日韩字体 fallback 怎么配不翻车
直接写 font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK JP", sans-serif 是常见错误——这些字体在非对应系统上可能不存在，或加载顺序导致西文也被套用中文字体，影响可读性。
- 优先用
:lang()分离规则，比如:lang(zh) { font-family: "HarmonyOS Sans SC", "Noto Sans SC", sans-serif; }，:lang(ja) { font-family: "Yu Gothic", "Noto Sans JP", sans-serif; } - 避免在全局
body里堆砌多语种字体，否则英文段落可能被强制套用日文字体，出现字重异常或标点错位 - Mac 和 Windows 对同名字体的渲染差异大（如
"Segoe UI"在 Win 上存在，Mac 上无对应），跨平台时建议用开源字体如"Noto Sans"系列并明确指定lang绑定
遇到 font-display: swap 导致语言切换后字体闪动怎么办
当用户切换语言（比如从 en 切到 zh），浏览器会重新匹配 :lang() 规则，触发新字体加载，若用了 font-display: swap，就可能出现回退字体 → 新字体闪入的过程。
立即学习“前端免费学习笔记（深入）”；
- 不是禁用
swap，而是提前预加载关键语种字体：用<link rel="preload">加载:lang(zh)和:lang(en)对应的@font-face资源 - 确保不同
lang对应的@font-facefont-family名互不冲突（例如都叫"BaseFont"），否则浏览器可能复用缓存但应用错字形 - 不要依赖 JS 动态改
document.documentElement.lang后立刻重排样式——CSSOM 更新有延迟，可加getComputedStyle强制触发重排，或用requestAnimationFrame延迟应用
为什么 Safari 下 :lang(zh) 有时不生效
Safari 对 :lang() 的实现更严格：它要求 lang 属性必须出现在目标元素自身或其任意祖先元素上，且不能是通过 JS 动态插入后未触发 CSSOM 重算的“游离”状态。
- 常见坑：Vue 中用
v-html渲染富文本，内容里没带lang，父容器又没声明，Safari 就无视:lang(zh)规则 - 修复方式：给富文本外层容器显式加
lang="zh"，或用[lang~="zh"]属性选择器兜底（但注意语义弱于:lang()） - 另一个隐藏问题：Safari 15.4+ 之前不支持
:lang()匹配带连字符的子标签（如zh-Hans），需降级为:lang(zh)或用属性选择器
最麻烦的其实是字体度量差异——同一段文字在中/日/英字体下 line-height、letter-spacing 表现不一致，:lang() 切换后容易引发布局抖动。这点没法靠 CSS 自动修复，得结合 line-clamp 或 contain: layout 控制影响范围。
