在body上重写css变量切换字体可行，但需确保所有字体声明引用该变量且能继承；body比:root更灵活因作用域受限，避免影响弹窗、iframe等；必须显式在class规则中重声明变量，而非仅靠添加class；还需预加载字体、严格匹配font-family名、避免内联样式覆盖，并完整声明所有相关变量。
直接在 body 上重写 CSS 变量来切换字体系列，是可行的，但必须满足一个前提：所有字体声明都基于 var(--font-body) 这类引用，且 body 级变量能被后代元素正确继承 —— 否则字体不会变，或者只局部生效。
为什么 body 上设变量比 :root 更灵活？
因为 :root 是全局作用域，一旦在它里面定义了 --font-body，所有地方都会读这个值；而把变量写在 body.skin-roboto 里，就天然限定了作用域：只有 body 及其后代能读到新值，不影响弹窗、iframe 或 Shadow DOM 外部组件。
常见错误是以为只要 body 有 class 就自动覆盖 :root 的变量 —— 实际上必须显式在该 class 规则块内重新声明变量，例如：
:root { --font-body: "Inter", sans-serif; }
body.skin-roboto { --font-body: "Roboto", sans-serif; }
不写第二行，body.skin-roboto 下的 var(--font-body) 依然取的是 :root 的值。
如何确保字体链真正生效？
仅靠变量重写还不够，浏览器要加载并应用新字体，得满足三个条件：
-
@font-face必须提前声明（不能靠 JS 动态注入），且font-family名与变量值严格一致（大小写、引号、空格） - 使用该变量的元素必须能继承到新值 —— 检查是否被
!important、内联style或更高优先级选择器覆盖 - 避免在
body上直接写font-family，否则会绕过变量，导致切换失效
推荐写法：
body { font-family: var(--font-body); }
body.skin-serif { --font-body: "Merriweather", serif; }
body.skin-mono { --font-body: "Fira Code", monospace; }
切换时字体闪动（FOUT）怎么压？
用户点按钮后，浏览器要下载新字体、触发回流、重绘文本 —— 这个间隙会显示 fallback 字体。关键不是“等它加载完再切”，而是让所有字体资源提前就绪：
- 用
<link rel="preload" as="font" crossorigin>预加载所有目标字体（包括 Roboto、Inter、Noto Sans 等） - 不要依赖
@import加载字体文件 —— 它阻塞 CSS 解析，且失败时静默 - 切换前先检查
document.fonts.check('12px "Roboto"')，但别阻塞 UI；可加font-display: swap保底
如果项目支持现代 API，可以用 font-display: optional 减少非关键字体干扰首屏。
body 类名切换 vs documentElement.style.setProperty
两种方式都能改变量，但行为差异很大：
-
document.body.className = 'skin-roboto'：靠 CSS 层叠生效，可调试、可回退、支持 :is() 和媒体查询嵌套，推荐用于主题级切换 -
document.documentElement.style.setProperty('--font-body', '"Roboto"')：直接改根节点变量，简单但难维护 —— 多个字体变量（正文、标题、代码）要逐个 set，且无法用 CSS 回退到默认值
更隐蔽的坑：如果用了 body[data-theme] 而不是 body.theme-name，JS 切换时得用 setAttribute，不是 classList，否则规则不匹配。
最易被忽略的一点：字体变量必须在每个目标 body class 内完整声明，不能只改一个 —— 比如你只写了 body.skin-ja { --font-body: "Noto Sans JP"; }，但忘了设 --font-heading，那 h1 就可能回退到系统字体，造成视觉割裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
