最稳定方式是用js动态修改html元素的font-size并配合rem单位。初始设html{font-size:16px}，通过document.documentelement.style.fontsize赋值，用localstorage保存用户偏好，限制缩放范围（如12px–24px），避免使用zoom或transform:scale()以免破坏布局和无障碍支持。
直接用 CSS 的 font-size 配合 JavaScript 动态改根元素或容器的字号，是最稳定、兼容性最好、也最容易控制缩放范围的方式。别碰 zoom 或 transform: scale()，它们会破坏布局流和可访问性。
怎么用 JS 控制 html 或 body 的 font-size
核心思路是把字体大小“上提”到根元素，让所有相对单位（rem）自动响应。不推荐只改某个 div 的 font-size，那样需要手动重设子元素继承逻辑，容易漏。
实操建议：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 初始时在
<style></style>里设html { font-size: 16px; }，确保基准明确 - 按钮点击后，用
document.documentElement.style.fontSize直接赋值，比如"18px"或"120%" - 用
localStorage记住用户上次选择，页面加载时读取并应用，避免每次刷新重置 - 限制缩放范围（如最小 12px、最大 24px），防止用户把文字调到不可读或撑破布局
为什么不用 zoom 或 transform: scale()
这两个看似简单，但实际埋坑很深：
-
zoom是非标准属性，Chrome 和 Edge 已逐步弃用，Firefox 完全不支持 -
transform: scale()只缩放渲染结果，不改变文档流尺寸——按钮变大了，但点击热区没变；行高、间距、滚动高度全乱套 - 屏幕阅读器无法感知
transform缩放，对无障碍极不友好 - 打印样式表中
transform默认失效，用户打印时回到原始字号
按钮布局和可访问性关键点
按钮本身不是重点，但交互链路必须健壮：
- 用
<button type="button"></button>，禁用默认提交行为，避免意外刷新 - 为每个按钮加
aria-label，例如aria-label="放大文字"，支持语音朗读 - 按钮组用
display: flex+gap布局，比浮动或 inline-block 更稳，且支持响应式收缩 - 禁用状态（如已到最大字号）要视觉可见：设
disabled属性 +opacity: 0.5+pointer-events: none
最易被忽略的是：字号变更后，行高、段间距、按钮内边距这些依赖 em 或 rem 的值是否同步生效。务必统一用 rem 写全局排版，否则改了 font-size，只有文字变，其他全卡在原尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
