内联style属性可直接设置font-family和font-size，优先级最高，适合单元素临时调试；font-family需提供备选字体（如"'Noto Sans CJK SC', sans-serif"），font-size推荐使用rem单位，配合document.documentElement.style.fontSize实现全局无级缩放。

直接改 font-size 和 font-family 就行，但必须用 CSS 控制， 标签已废弃，硬写会失效或被浏览器忽略。

用内联 style 快速调单个元素字体

适合临时调试或 CMS 输出的孤立段落，优先级最高，能盖过外部样式。

• font-family 要写备选字体，用英文逗号分隔，比如 "PingFang SC", "Microsoft YaHei", sans-serif，避免中文字体缺失时显示方块
• font-size 推荐用 rem 或 px，别用 em——父元素没设字号时，1em 可能是 16px，也可能是 13.33px（取决于浏览器默认）
• 示例：

  正文

用 rem + document.documentElement.style.fontSize 实现全局无级调节

这是唯一真正可用的“放大/缩小字体”方案，不破坏系统缩放、不漏元素、不干扰 em 计算。

• 所有文字必须用 rem 单位（如 h1 { font-size: 2.5rem; }），不能混用 px；否则滑块一动，那些 px 字就卡死不动
• 滑块值必须映射为百分比，不是像素：min="87.5"（14px）、max="150"（24px）、value="100"（默认 16px）
• JS 绑定必须写成：document.documentElement.style.fontSize = slider.value + '%';，绝不能用 cssText 或改 body
• 第三方组件（比如 Ant Design 的 Button 或日历）若没响应根字号，得查它是否支持 theme 配置或自定义 class 注入点

为什么改 body 或逐个改 p.style.fontSize 会出问题

不是 JS 写错了，而是渲染链被破坏了。

Presale One-pass Orchestrator

一款AI工具，主要用于运行或监督单遍 Codex 实现，包含预检门控、分步计划执行及严格的 QA 缺陷闭环。适用于执行已批准的售前...，适合需要提升相关任务效率的用户。

下载

• document.body.style.fontSize = '18px' → 后续所有 em 值都会基于这个新值再乘一次，嵌套深的菜单、弹窗文字可能突然变大两倍
• document.querySelector('p').style.fontSize = '16px' → 标题、按钮、图标文字、富文本框里的字全没动，用户根本感觉不到“调大了”
• 更隐蔽的是：Windows “放大文本”或 macOS “更大字体”设置会被强制覆盖，视障用户打开系统缩放后，你的页面反而变小或文字被截断

调节后文字模糊或错位？重点检查这三处

失效几乎从不来自 JS 逻辑，而是样式层冲突或单位混用。

• 打开开发者工具的 Computed 面板，看最终生效的 font-size 值来源——如果显示 20px 但你设的是 1.25rem，说明某个 !important 规则或第三方 class 把它锁死了
• 检查是否有 h1 { font-size: 32px !important; } 这类硬编码，必须删掉或改成 2rem
• 确认 line-height 没写死 px，否则字号一调大，行高不变，文字就会挤在一起；推荐用无单位数值，如 line-height: 1.5

真正麻烦的不是怎么写那几行 JS，而是把全站所有 px 和 em 字号统一收口到 rem，并确保第三方 UI 库不偷偷写死尺寸——这点容易被忽略，但决定了功能能不能真正在生产环境跑通。