应优先使用 html 的 lang 属性（如 lang="zh-cn"）配合 css 属性选择器（如 [lang="zh-cn"]）实现国际化样式适配，确保语义清晰、seo 友好且无需 js；仅在 ssr 不可控时才用类名兜底。需重点处理中英文断行（word-break: keep-all）、字体回退（中文字体+system-ui）和 rtl 布局（[lang="ar"]{direction:rtl}），避免深链选择器与模糊匹配（如 [lang^="zh"]），并按语言粒度加载字体以优化 fout。
如何用 html 的 lang 属性和 CSS 类名做基础国际化样式适配
直接靠 CSS 本身做不到“翻译”，但能根据语言切换调整排版、字重、行高、字体族等视觉表现。核心是利用 html 标签的 lang 属性，配合 CSS 层级选择器或自定义类名做样式分流。
推荐优先用原生 lang 属性，语义清晰、无需 JS 干预、SEO 友好。只有在 SSR 不可控或需运行时动态切语言时，才退而求其次加类名（如 class="lang-zh"）。
-
lang值必须符合 BCP 47 规范（如zh-CN、en-US、ja），不能写成zh或cn—— 否则部分浏览器不识别 - CSS 中用
[lang="zh-CN"]匹配比.lang-zh更可靠，避免类名污染和命名冲突 - 不要在每个元素上重复写
lang，只设在html根标签即可，子元素自动继承
哪些样式必须按语言区分？重点看这三类
不是所有样式都要分语言，多数项目只需处理三类高频问题：中英文混排断行、东亚文字字号/行高、特殊字符渲染（如阿拉伯文 RTL）。
- 断行行为：
word-break: keep-all对中文/日文必要，但对英文会破坏 hyphenation；overflow-wrap: break-word在长 URL 场景下更稳妥 - 字体 fallback：
font-family中中文后必须跟system-ui或具体中文字体（如"PingFang SC", "Hiragino Sans GB"），英文段落可放心用system-ui或-apple-system - RTL 支持：
[lang="ar"], [lang="he"]需加direction: rtl; text-align: right，但注意不要覆盖表单控件的默认逻辑方向
lang 选择器的兼容性与性能坑
[lang="zh-CN"] 这种属性选择器在所有现代浏览器都支持，包括 IE11。但它有隐性成本：匹配深度越大，CSS 引擎计算越慢；尤其当页面含大量嵌套文本节点时，可能触发重排卡顿。
- 避免写成
[lang="zh-CN"] p span em这种深链选择器，改用[lang="zh-CN"] .text-body显式类名承接 - 不要用
[lang^="zh"]这类模糊匹配——zh-Hans和zh-Hant渲染需求可能不同，强行合并反而出错 - 若服务端无法输出正确
lang，宁可用 JS 注入document.documentElement.lang = "zh-CN"，也别在 HTML 里硬编码错误值
字体加载失败时的兜底策略
中文字体体积大、CDN 延迟高，用户首次访问常看到 FOUT（Flash of Unstyled Text）。光靠 @font-face 的 font-display: swap 不够，得配合语言维度控制加载粒度。
- 只对
[lang="zh-CN"], [lang="ja"], [lang="ko"]等启用中日韩字体栈，英文环境跳过加载 - 用
@supports (font-variation-settings: normal)检测可变字体支持，再决定是否启用font-weight: 350等精细调节 - 避免在
@font-face中写unicode-range来切语言——它只按 Unicode 区块生效，无法精准对应语言习惯（比如简体中文也用 U+4E00–U+9FFF，但日文同样用这部分）
DOMContentLoaded。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
