根本原因是浏览器和辅助技术在HTML解析完成时已锁定各节点语言上下文，JS仅更新DOM属性而不触发重排、重绘或语音引擎重初始化；必须遍历所有显式声明lang的元素（如<blockquote lang="ja">）逐一重设el.lang，而非只改document.documentElement.lang。
document.documentElement.lang赋值后字体/语音没变
改了document.documentElement.lang但中文字体还是用西文字体链、屏幕阅读器仍在读中文，根本原因不是 JS 写错了，而是浏览器和辅助技术在 HTML 解析完成时就锁定了每个节点的语言上下文。JS 赋值只是更新 DOM 属性，不触发重排、重绘或语音引擎重初始化。
真正要动的不是根节点，而是所有已存在且带 lang 属性的元素：
- 用
document.querySelectorAll('[lang]')找出全部显式声明语言的节点 - 遍历并重设：例如
el.lang = 'en-US'，不能只改document.documentElement - 特别注意语义化标签：
<blockquote lang="ja">、<pre lang="bash">、<q lang="fr">，漏一个就可能错读/错渲 - 避免用
document.body.setAttribute('lang', 'en')批量覆盖——这会抹掉子元素自己的lang，导致:lang(zh)失效
:lang(zh)样式不匹配目标元素
:lang() 是纯 CSS 匹配机制，不监听 DOM 变更，只依赖解析时的 lang 值。常见失效不是选择器写错，而是语言信息根本没传到元素上：
-
<html>标签没写lang→ 后代失去继承源头 - 写了
xml:lang="zh-CN"但没写lang→ Chrome/Firefox/Safari 都不认 - 混排日文但没给子元素加
lang="ja"→<p>Hello 世界</p>中「世界」不会被:lang(zh)命中，除非整个p带lang="zh" - 用了非法语言标签，如
lang="ch"、lang="zh_cn"（下划线）→ 不符合 BCP 47，浏览器视作无效值
验证方式：在 DevTools 的 Elements 面板里选中元素，看属性栏是否真有 lang="zh-CN"；再切到 Computed 面板查 font-family 是否加载了中文字体。
立即学习“前端免费学习笔记（深入）”；
切换语言后新插入 DOM 的 lang 没同步
动态插入的节点（比如通过 innerHTML、appendChild 或框架渲染）默认不继承新语言，它们要么继承旧的 document.documentElement.lang，要么按浏览器默认语言处理。
必须在插入前显式设置：
- 手动创建元素时：
const el = document.createElement('p'); el.lang = 'ja-JP'; el.textContent = 'こんにちは'; - 用
innerHTML插入 HTML 字符串时，必须把lang写进字符串里：el.innerHTML = '<p lang="zh-Hans">你好</p>' - 使用模板引擎（如 Handlebars、EJS）时，在模板中动态插值：
<p lang="{{currentLang}}">{{text}}</p> - 若用 React/Vue，确保组件 props 或响应式数据驱动
lang属性，而不是只改 state
字体链没生效，font-family 仍走 fallback
即使 lang 值正确、:lang(zh) 也命中了，字体链仍可能不触发——因为浏览器只在 lang 值严格符合 BCP 47（如 zh-CN、ja-JP）时才启用语言感知逻辑。
关键检查点：
- 确认字体链中该语言专用字体放在最前：
font-family: "PingFang SC", "Hiragino Sans GB", sans-serif，不能把sans-serif放最前 - 避免用
font-display: block导致字体加载期间显示空白或 fallback；推荐swap确保回退生效 - 检查系统是否真有对应字体：macOS 上
"PingFang SC"存在，Windows 上需用"Microsoft YaHei"，Linux 则依赖本地配置 - 用
getComputedStyle(el).fontFamily查实际生效值，别只信 CSS 文件里的声明
真正容易被忽略的是：lang 和字体链必须同时合规，缺一不可；而多数人只盯着 JS 切语言，忘了新 DOM 和字体链这两块硬骨头。
