必须按lang属性条件触发字体加载，不能全局预载；需用html[lang="zh-CN"]等选择器绑定不同@font-face，每个语言对应独立字体声明与fallback链，局部混排内容须单独声明lang并配对应字体。
字体加载必须按 lang 属性条件触发，不能全局预载
浏览器不会自动根据 document.documentElement.lang 切换字体族，你得手动用 CSS 的 html[lang="zh-CN"]、html[lang="ja"] 等选择器绑定不同 @font-face 声明。如果把中日韩字体全塞进一个 @font-face 并设为 font-family: "Noto Sans"，实际只会加载第一个匹配的字体文件（通常是 Latin），其他语言文字会 fallback 到系统字体，出现混排错位或方块字。
- 每个语言包对应一套字体声明：比如
zh-CN用Noto Sans SC，ja用Noto Sans JP，ko用Noto Sans KR - 字体文件路径要带语言标识，避免缓存冲突：例如
fonts/noto-sans-sc-v20.woff2和fonts/noto-sans-jp-v20.woff2 - 不要在
@font-face中写unicode-range试图“智能切分”——它只对单个字体文件生效，无法跨语言精准控制；且 Chrome 对多 range 的解析有兼容性问题
data-i18n 更新后，字体不会自动重绘，得强制触发 layout
JS 批量替换 textContent 后，DOM 文本变了，但浏览器不一定立刻重排字体回退链。尤其当从英文切到中文时，若目标元素原本没显式设置 font-family，可能仍沿用 Latin 字体渲染新文本，直到用户滚动或 resize 才刷新。
- 切换语言后，对所有刚更新的元素执行
el.style.transform = 'scale(1)'（哪怕只是临时设再还原），可强制触发重绘 - 更稳妥的做法是：在语言切换完成回调里，调用
getComputedStyle(el).fontFamily读一次样式，触发 layout 强制刷新 - 别依赖
font-display: swap解决——它只管加载时机，不管语言变更后的字体重选逻辑
lang 属性不等于字体控制开关，局部混排内容必须单独声明
document.documentElement.lang = 'zh-CN' 只影响根节点及未显式设置 lang 的子节点。一旦页面里有 <code lang="en">useState</code> 或 <blockquote lang="fr">，这些元素的字体回退链就和主语言无关了——它们得各自配 code[lang="en"] { font-family: "SFMono-Regular" } 这类规则。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 所有带
lang属性的元素，都要在 CSS 里单独写选择器，不能指望继承根节点字体 - 特别注意
<pre>、<code>、<var>这类语义化标签，它们常含英文术语，必须显式加lang="en"并配等宽字体 - 中文页面里嵌英文引文，若只靠
html[lang="zh-CN"]设置字体，引文里的英文可能被套上思源黑体，导致字重/间距不协调
字体加载失败时，fallback 链必须覆盖所有语言场景
如果 @font-face 指向的 noto-sans-sc.woff2 因 CORS 或路径错误 404，浏览器不会报错，而是静默 fallback 到下一个 font-family。若 fallback 链写成 "Noto Sans SC", sans-serif，那在 macOS 上会落到 Helve，Windows 上落到 Segoe UI，结果中文字体完全不可控。
立即学习“前端免费学习笔记（深入）”；
- 每个语言的 fallback 链要明确写出系统字体：例如
html[lang="zh-CN"] { font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; } - 日文必须包含
"Hiragino Kaku Gothic Pro"、"Meiryo"；韩文必须含"Malgun Gothic"；阿拉伯语需加"Segoe UI Arabic" - 不要省略
sans-serif或serif末尾兜底——这是 WCAG 2.1 要求，也是屏幕阅读器字体适配基础
