最稳的全站字体缩放方案是直接修改document.documentElement.style.fontSize，初始CSS设html{font-size:16px;}，JS中用带单位的赋值如'18px'，限制范围14px–24px，三态切换需手动管理档位并校验数值。
直接改 document.documentElement.style.fontSize 是最稳的路径
全站字体缩放，只动根元素 html 的 font-size，其他所有用 rem 的元素自动响应。别去逐个改 p、h1 或 body 的样式——那样漏元素、难维护、还可能覆盖用户系统缩放设置。
实操要点：
- 初始 CSS 里写
html { font-size: 16px; }，别留空或靠浏览器默认 - JS 中用
document.documentElement.style.fontSize = '18px';赋值，单位不能省 - 避免用
cssText全量重写，比如document.documentElement.style.cssText = 'font-size: 18px;'，会干掉你之前写的clamp()或媒体查询 - 限制范围：最小不小于
14px（太小可读性差），最大不超过24px（防撑破布局）
按钮点击实现三态切换（大 / 正常 / 小）要手动判状态
classList.toggle() 只适合两态，比如开/关；字号切换是典型三态，必须自己记当前档位。
推荐做法：
立即学习“前端免费学习笔记（深入）”；
- 用一个变量（如
let fontSizeLevel = 'normal';）或从getComputedStyle(document.documentElement).fontSize读取当前值 - 点击时按顺序轮转：
'small' → 'normal' → 'large' → 'small' - 每次赋值前做数值校验，例如
parseFloat(val) >= 14 && parseFloat(val) - 把档位存进
localStorage，页面刷新后能恢复，否则用户调好字号又变回默认
为什么不能用 transform: scale() 或 zoom
这两个看起来“放大了”，但实际没改文字尺寸语义，纯属视觉欺骗，问题一堆：
-
zoom是非标准属性，Chrome 已弃用，Firefox 完全不支持，Safari 不认 -
transform: scale()不改变文档流：行高、间距、按钮热区、打印输出全错乱 - 屏幕阅读器读的还是原始字号，对低视力用户完全无感知
- 移动端双指缩放 +
scale()会叠加，效果不可控
真要改“字体大小”，就老老实实动 font-size ——这是唯一语义正确、无障碍友好、打印可用、兼容稳定的方案。
容易被忽略的继承与副作用
改了 html 的 font-size，不是只有文字变大。所有依赖相对单位的地方都会联动：
-
line-height: 1.5这种无单位值，会按新font-size重算，可能撑爆容器 -
padding: 1rem、margin: 0.5rem全部同比例变化，按钮和段落间距也会变 - 第三方组件如果内部用了
px或硬编码em，不会响应，得单独 patch - 确保
html没被媒体查询反复覆盖，比如@media (max-width: 768px) { html { font-size: 14px; } }和用户切换冲突
最保险的做法：全站统一用 rem，禁用 px 写字体/间距/圆角，把 html { font-size: ... } 当作唯一调节旋钮——调它，就等于调整个页面的缩放基线。
