lang属性必须严格使用bcp 47标准格式（如zh-cn、en-us），非标准写法会导致css ::lang()失效、拼写检查关闭、语音合成异常及i18n fallback等问题；所有环节（html、js、服务端路径、json键名、font-family和动态内容）均需遵循该规范并标准化处理。
lang 属性必须用 BCP 47 标准，不是随便写
浏览器、屏幕阅读器、字体渲染引擎和搜索引擎都只认 BCP 47（RFC 5966）格式的 language tag，比如 zh-CN、en-US、ja-JP。写成 zh_CN、chinese、zh-Hans（没指定区域）或 zh-hans-CN（冗余）都会导致部分功能失效——CSS 的 ::lang(zh) 不触发，拼写检查关掉，甚至某些 CDN 或 i18n 库直接 fallback 到默认语言。
常见错误现象：document.documentElement.lang = 'zh' 看似简洁，但实际会让 Safari 忽略字体回退规则，Android WebView 可能拒绝应用系统级语音合成；lang="CN" 这种纯区域码完全无效。
-
zh→ 应统一映射为zh-CN（简体中文大陆）或zh-TW（繁体中文台湾），不能省略区域子标签 -
en→ 必须补全为en-US或en-GB，否则 Chrome 会按en-US渲染日期/数字，而 Firefox 可能 fallback 到系统 locale - 小语种如
pt-BR和pt-PT必须区分，拼写、标点、货币符号完全不同 - 服务端注入时，路径
/fr/对应fr-FR，/fr-ca/才对应fr-CA，不能靠 guess
data-i18n 键名不绑定语种缩写，只管翻译键一致性
语言包里的 key 名（如 header.title、form.submit）跟语种缩写无关，它只是数据标识符。真正影响加载的是你 fetch 的文件路径或对象层级，比如 fetch('locales/fr-FR.json')，而不是键名里带 fr。
容易踩的坑：有人把键名设计成 fr_header_title，结果加新语言（如 fr-CH）就得改所有 key，还破坏了 JSON 文件间字段对齐——一旦某个语言缺 key，整个页面该字段留空，且无法 fallback。
- 所有语言 JSON 文件必须键名完全一致，哪怕某语言暂时没译，也得保留
"header.title": "" - 键名用英文小写+点分隔（
button.cancel），避免空格、大写、特殊字符，减少解析出错可能 - 不要在键名里塞语种信息（如
zh_button_cancel），这会让切换逻辑耦合、难以做静态分析
URL 参数和 localStorage 存的 lang 值要标准化再用
用户可能手动输 ?lang=zh-hans 或点击旧链接带 lang=cn，这些值不能直接塞进 document.documentElement.lang 或 fetch 路径，必须先映射成标准 BCP 47 格式。
原因：navigator.language 返回的 zh-CN 是标准值，但某些安卓 WebView 返回 zh，iOS Safari 在部分地区返回 zh-Hans，而用户 localStorage 里可能存着 zh_CN（从老系统迁移过来）。
- 建立明确映射表：
{ 'zh': 'zh-CN', 'zh-hans': 'zh-CN', 'zh-hant': 'zh-TW', 'cn': 'zh-CN', 'tw': 'zh-TW' } - 优先级链上，URL 参数 > localStorage > navigator.language，但三者都要过一遍标准化函数
- fetch 语言包前，确保路径是
locales/zh-CN.json，不是locales/zh.json（除非你真有这个文件且内容完整）
font-family 和 CSS ::lang() 依赖 lang 属性的真实值
中日韩文字混排时，font-family 里写的 "Noto Sans SC", "PingFang SC" 只对 lang="zh-CN" 生效；lang="ja-JP" 下才启用 "Noto Sans JP"。伪类 ::lang(ja) em { font-style: normal; } 也只匹配真实设置的 lang 值，不继承、不模糊匹配。
如果你只改了根节点 lang，但忘了同步更新引用外文的子元素（比如引述一段德语原文的 <blockquote lang="de"></blockquote>），那这段德语依旧用中文字体渲染，标点间距错乱，连带影响可访问性。
- 切换语言时，除了更新
document.documentElement.lang，还得遍历所有带lang属性的元素，重设其值（如el.setAttribute('lang', newLang)） - 动态插入的内容（如评论、通知）也要显式设置
lang，不能指望父节点继承 - 避免用 JS 动态拼接
font-family字符串，CSS 本身已支持基于lang的条件加载
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
