样式国际化本质是通过lang属性驱动浏览器适配文字方向、排版和字体回退，需显式为每个语义容器设置lang，配合::lang()伪类、dir属性及分语言定义font-family。
HTML样式本身不支持“国际化”，所谓“样式国际化”本质是语言切换时，让样式能适配不同文字方向、排版习惯和字体回退链，不是翻译 CSS 代码。核心靠 lang 属性驱动浏览器行为，再配合 ::lang() 和 dir 控制视觉表现。
lang 属性必须显式写在每个语义化容器上，不能只设在
只改 document.documentElement.lang = "zh-Hans"，<p></p> 里的顿号仍按英文间距渲染，<pre class="brush:php;toolbar:false;" lang="bash"></pre> 的等宽字体可能被中文字体覆盖，屏幕阅读器继续读英文 alt 文本——浏览器和辅助技术查的是每个元素自己的 lang，不是继承来的。
-
<h1 lang="zh-Hans">用户中心</h1>、<p lang="zh-Hans">欢迎回来</p>必须手动加 - 已有
lang的特殊元素（如<pre class="brush:php;toolbar:false;" lang="sql"></pre>）保留原值，这是合法混排，不是错误 -
<script></script>和<style></style>不参与文本渲染，里面写lang没用
用 ::lang() 伪类做语言敏感样式，不是靠 class 切换
想让中文用思源黑体、英文用 Inter、阿拉伯文用 Tajawal？不能靠 JS 动态加 class，得用 CSS 原生能力：::lang() 会根据元素自身 lang 值匹配，且优先级高于普通类选择器。
p::lang(zh-Hans) { font-family: "Source Han Sans SC", sans-serif; }p::lang(en-US) { font-family: "Inter", sans-serif; }blockquote::lang(ar) { direction: rtl; text-align: right; }- 别写
.lang-zh .title—— 这要 JS 同步维护 class，漏一个就失效
direction 和 writing-mode 要随 lang 自动生效，不能硬编码
阿拉伯语、希伯来语需要 dir="rtl"，但不能全局写 body { direction: rtl }——中文页面也会被翻转。正确做法是让 HTML 结构带 dir，并由 lang 触发：
- 根元素同时设
，或用 JS 根据语言包动态设置document.documentElement.dir - CSS 中用
[dir="rtl"] .nav { flex-direction: row-reverse; }，避免写死.rtl-nav - 垂直书写（如日文）用
writing-mode: vertical-rl，但只对lang="ja"元素生效，需配合::lang(ja)
字体回退链必须按语言分层定义，不能共用一套
中文字体堆砌一堆英文字体（如 "PingFang SC", "Helvetica", "Arial"）会导致英文段落用中文字体渲染，字重模糊；反过来，纯英文字体栈无法显示中文字符。回退链得按语言拆开：
body::lang(zh-Hans) { font-family: "HarmonyOS Sans SC", "Noto Sans CJK SC", sans-serif; }body::lang(en-US) { font-family: "Inter", "Segoe UI", system-ui, sans-serif; }body::lang(ar) { font-family: "Tajawal", "Cairo", sans-serif; }- 避免
font-family: "Noto Sans", sans-serif这种“万能”写法——它在所有语言下都用同一套，必然错配
真正麻烦的不是写几条 ::lang()，而是确保每次动态插入 DOM（比如弹窗、AJAX 表格行）时，lang 属性和对应字体规则同步到位——漏掉一个 <div lang="zh-Hans">，那一块文字就回归 Times New Roman。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
