内联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 控制，<font></font> 标签已废弃，硬写会失效或被浏览器忽略。
用内联 style 快速调单个元素字体
适合临时调试或 CMS 输出的孤立段落，优先级最高，能盖过外部样式。
-
font-family要写备选字体，用英文逗号分隔，比如"PingFang SC", "Microsoft YaHei", sans-serif，避免中文字体缺失时显示方块 -
font-size推荐用rem或px，别用em——父元素没设字号时，1em可能是 16px，也可能是 13.33px（取决于浏览器默认） - 示例：
<p style="font-family: 'Noto Sans CJK SC', sans-serif; font-size: 1.125rem;">正文</p>
用 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 写错了，而是渲染链被破坏了。
-
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 库不偷偷写死尺寸——这点容易被忽略，但决定了功能能不能真正在生产环境跑通。
