最稳妥的全局文字缩放方案是用 rem 单位配合动态设置 html 根元素 font-size，或使用 CSS 自定义属性 --font-scale 配合 calc() 实现无 JS 方案。
用 rem 配合根元素字体缩放最稳妥
直接改 body 或全局 font-size 会破坏响应式布局，尤其在移动端。真正批量调整个页面文字大小，推荐用 rem 单位 + 动态设置 html 根元素的 font-size。
原理很简单：所有用 rem 定义的文字（比如 font-size: 1.2rem）都会随 html 的 font-size 等比缩放。
实操建议：
- 把全站字体单位统一替换成
rem（如原16px→1rem，前提是根元素默认是16px） - 用 JS 批量调整：
document.documentElement.style.fontSize = '20px';
- 想支持用户手动放大/缩小，可绑定按钮或快捷键，修改该值并持久化到
localStorage - 注意：某些第三方组件库（如 Element UI、Ant Design）内部用
px写死字体，需额外覆盖其font-size样式
用 CSS 自定义属性（--font-scale）实现无 JS 方案
如果不想依赖 JS，又希望一次改完所有文字大小，CSS 自定义属性是更现代的选择。它允许你在顶层定义缩放系数，再用 calc() 或 clamp() 动态计算实际字号。
立即学习“前端免费学习笔记（深入）”；
示例：
:root {
--font-scale: 1.25;
}
h1 { font-size: calc(2rem * var(--font-scale)); }
p { font-size: calc(1rem * var(--font-scale)); }优点是纯 CSS、可继承、支持媒体查询条件切换；缺点是旧版 Safari（calc() 中嵌套 var() 支持不稳定，需加 fallback。
关键点：
- 不要用
transform: scale()整体缩放 body —— 会模糊文字、错乱表单焦点、破坏像素级定位 - 避免在
@media中重复写整套字体规则，应只改--font-scale值 - 若用 PostCSS，可用
postcss-custom-properties插件做兼容性降级
批量替换 HTML 中的 font-size 行内样式很危险
有人试图用正则批量替换 HTML 文件里所有 style="font-size: 14px"，这几乎必然出问题。
常见翻车场景：
- 匹配到非字体相关的
px（比如width: 14px、border: 1px solid #000） - 破坏已有
em/rem/%单位的逻辑，导致层级错乱 - 忽略内联样式优先级高于 CSS 文件，改了也无效
- 第三方脚本生成的 DOM（如图表库、富文本编辑器）不受影响，出现大小不一致
真要处理遗留项目中的大量行内样式，建议先用 Puppeteer 或 Cheerio 抓取所有含 font-size 的 style 属性，人工校验后再做定向替换，而不是无差别正则。
浏览器强制缩放不是前端可控方案
用户按 Ctrl/Cmd + + 放大页面，本质是浏览器对整个渲染层做变换，并非修改 CSS 字体值。前端无法监听“用户是否用了缩放”，也不能阻止或干预该行为。
但可以预防副作用：
- 避免固定高度容器（如
height: 20px）配小号文字，否则缩放后文字溢出 - 用
min-height替代height，留出弹性空间 - 测试时主动用浏览器缩放（125%、150%）检查文字截断、换行异常、按钮点击热区偏移
- 不要依赖
window.devicePixelRatio判断缩放 —— 它反映的是设备像素比，不是用户缩放比例
真正需要“全局调字”时，别绕开 CSS 单位设计本身。越想绕过 rem / 自定义属性去硬改，后期维护成本越高。
