直接用style.fontSize修改字体大小最简单，但必须带单位（如'24px'）；推荐用CSS类切换实现三态控制，避免zoom或transform；注意移动端viewport缩放和可访问性反馈。
用 style.fontSize 动态改字体大小最直接
不需要框架或复杂逻辑，原生 JavaScript 拿到元素后改 style.fontSize 就行。关键是单位必须写清楚——只写数字会失效，得带 px、em 或 rem。
常见错误是写成 el.style.fontSize = 24，这不会生效；正确写法是 el.style.fontSize = '24px'。
推荐用 em 或 rem，这样能继承父级缩放关系，响应式更可控。如果只是临时演示，px 最直观。
用 class 切换比内联样式更易维护
频繁操作 style 容易混乱，尤其要支持多次点击切换（放大→缩小→恢复）时。更稳妥的做法是预定义 CSS 类，用 element.classList.toggle() 控制。
.text-large { font-size: 1.5em; }
.text-small { font-size: 0.8em; }
对应 JS：btn.addEventListener('click', () => textEl.classList.toggle('text-large'));
注意：如果要实现「三态」（大/正常/小），别用 toggle，改用 add/remove 配合状态变量判断。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
避免用 zoom 或 transform: scale()
这两个属性看起来也能“放大”，但本质不是改字体大小：
-
zoom是非标准属性，Chrome 已弃用，Safari 不支持 -
transform: scale()只是视觉拉伸，文字实际尺寸没变，会影响布局、选中、可访问性（屏幕阅读器读的还是原始字号）
真要改“文字大小”，就老老实实动 font-size。这是语义正确、兼容性好、无障碍友好的做法。
移动端要注意 viewport 缩放干扰
在 iOS Safari 上，如果用户双指缩放过页面，再点按钮可能发现字体变化不明显——因为整个视口被缩放了。确保 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 中没禁掉 user-scalable，否则按钮功能会被系统缩放覆盖。
更稳妥的方式是监听 textEl.style.fontSize 的当前值做相对计算，而不是硬编码增减量，比如：
const cur = parseFloat(getComputedStyle(textEl).fontSize);<br>textEl.style.fontSize = (cur * 1.2) + 'px';
实际交互中，容易忽略的是可访问性反馈——按钮应有 aria-pressed 状态，且字号变化需足够明显（至少 ±20%），否则低视力用户可能感知不到效果。
