html5中lang属性用于语义化标注语言以提升无障碍支持，须用语义标签+bcp 47规范值（如zh-cn）；字体渲染优化需结合:lang()伪类、font-display及多语言字体栈实现精准适配。
在HTML5中，lang属性和字体渲染优化是两个独立但常需协同处理的问题：前者解决语义与无障碍识别，后者影响文字显示质量。它们不互相触发，但配合得当能让多语言页面既准确又清晰。
局部定义不同语言文字：用对标签 + 合法值
局部语言标注不是“给任意元素加lang”就行，关键在于语义合理性和标准合规性：
-
必须用语义化容器包裹目标内容：比如英文引文用
<q lang="en">Hello</q>，日文术语用<cite lang="ja">さくら</cite>；避免用<div lang="en">或<code><span lang="fr"></span>——这些缺乏语言上下文，屏幕阅读器和翻译工具往往忽略 -
值必须符合BCP 47规范：写
en-US、fr-FR、ja，别写english、zh_cn或zh-china；大小写不敏感，但惯例全小写加短横线 -
中文推荐用
zh-CN：它明确表示简体中文+中国大陆规范，兼容性最稳；zh-Hans虽合法，但部分旧读屏软件支持弱；zh太宽泛，易导致断词或字体回退异常 -
CSS可精准响应：例如
[lang="en"] { font-family: "Inter", sans-serif; }或:lang(zh) { quotes: "「" "」" "『" "』"; }，前提是HTML中已正确声明 -
优先使用
font-display: fallback：在@font-face中设置，确保中英文都能快速显示备用字体，避免FOIT；尤其适合含英文字母的中文按钮或提示语 -
为不同语言指定专用字体栈：用
:lang()伪类区分，例如body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }:lang(zh), :lang(ja), :lang(ko) { font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif; } -
控制字号与行高一致性：中文正文字号建议≥16px，英文可略小；混排段落统一用
line-height: 1.6，避免因字体度量差异造成基线错位 -
慎用
-webkit-font-smoothing：在iOS上设antialiased可提升中文字边缘清晰度，但Android不支持；不要全局启用，仅针对:lang(zh)等选择器局部应用 -
必须修改
document.documentElement.lang：这是唯一被浏览器和读屏软件识别的文档语言标识；改document.body.lang无效 -
局部
lang也要批量更新：比如导航栏里的英文菜单项<li lang="en">Home</li>，切换成中文后应改为lang="zh-CN"并更新文案 -
字体栈建议随语言动态切换：可通过JS切换
的data-lang属性，再用CSS响应，例如html[data-lang="zh-CN"] body { font-family: "HarmonyOS Sans SC", ...; }html[data-lang="en-US"] body { font-family: "Inter", ...; } -
注意已加载内容的局限性：JS修改
lang后，已朗读过的文本不会重读；若强依赖语音反馈，建议整页刷新而非纯前端切换
优化字体渲染：不依赖lang，但需适配多语言场景
lang本身不影响字体显示，但多语言混排时，不同文字对字体的需求差异大（如中日韩需更大字重、更宽字距），所以渲染优化要针对性设计：
语言切换时的连带处理要点
用户手动切换页面语言时，不能只改文本，还要同步更新底层声明：
