lang属性需用bcp 47完整标签（如zh-cn、ja-jp）才能触发正确字体回退，泛化标签如zh或错误格式（zh_cn、chinese）无效；修改document.documentelement.lang不影响已渲染文字，须同步更新所有带lang属性的元素。
lang属性怎么写才触发字体回退
只写lang="zh"或lang="en"大概率不生效。浏览器字体回退链依赖BCP 47完整标签，比如zh-CN会激活简体中文字体链（如“微软雅黑→SimSun”），而zh-TW可能走“微软正黑→標楷體”。写错格式（如zh_CN、Chinese）等于没写——字体引擎直接忽略。
常见组合：
-
zh-CN：大陆简体，默认用“微软雅黑”+“思源黑体” -
ja-JP：日文，触发“游ゴシック→Meiryo”回退 -
ko-KR：韩文，“Malgun Gothic→Nanum Gothic” -
ar-SA：阿拉伯语，需配合dir="rtl"才能正确渲染连字
别用泛化标签zh，它无法区分简繁体，某些系统会 fallback 到拉丁字体链，导致中文显示为方块。
为什么改document.documentElement.lang不改变已渲染文字的字体
因为字体回退在DOM解析初期就完成了。浏览器读取每个元素自身的lang属性决定该节点用哪套字体链，根节点lang只影响未显式声明lang的子节点，且仅限继承场景。你JS改了document.documentElement.lang，但<p lang="en">API</p>早已按英文链渲染完毕，不会重排。
所以必须同步更新所有带lang的元素：
- 遍历
document.querySelectorAll('[lang]') - 对每个节点执行
el.lang = nextLang（如从zh-CN切到en-US） - 特别注意：
<pre class="brush:php;toolbar:false;" lang="bash"></pre>这种非语言码要保留原值，别误改成en-US——语法高亮工具认的是bash，不是语言
:lang()伪类和字体适配的关系
:lang(zh-CN)能匹配lang="zh-CN"的元素，但不匹配lang="zh"或lang="zh-Hans"。想覆盖所有中文变体，得写全：
html:lang(zh-CN), html:lang(zh-Hans), html:lang(zh-SG) {
font-family: "Microsoft YaHei", "Source Han Sans SC", sans-serif;
}
html:lang(zh-TW), html:lang(zh-Hant), html:lang(zh-HK) {
font-family: "Microsoft JhengHei", "Source Han Sans TC", sans-serif;
}
别偷懒只写:lang(zh)——现代浏览器基本不响应这个泛化匹配。
更关键的是：:lang()本身不控制字体，它只是选择器；真正起作用的是你后面写的font-family声明。漏写声明，或声明里没包含对应语言的字体，照样白搭。
混排内容（如代码块、引用）的lang设置陷阱
英文术语嵌在中文段落里，不能靠父级继承。比如<p>我们使用<code>React Router实现路由
React Router当中文读成“瑞克特罗特”，必须单独标：
<p>我们使用<code lang="en">React Router</code>实现路由</p>
类似地：
-
<pre class="brush:php;toolbar:false;" lang="en"># Initialize counter</pre>（别用lang="bash"，那不是语言码） <blockquote lang="fr">La vie est belle.</blockquote><q lang="de">Das ist gut.</q>
这些局部lang值在切换主语言时也得一并更新——除非你明确想保留原文（比如一段日文引用始终该是日语）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
