必须用font-size而非transform:scale()实现文字缩小，因后者仅视觉缩放、不改变实际字号和可访问性；JS修改需带单位如'14px'或'0.85rem'，推荐CSS类切换配合状态变量控制三态，同时调整padding和line-height以匹配新字号，并添加:active按压反馈与:focus-visible键盘焦点样式。
点击按钮时文字缩小，别用 transform: scale()
transform: scale() 看起来能“缩小文字”，但它只是视觉拉伸，font-size 没变，文字实际尺寸、行高、可访问性（屏幕阅读器读的仍是原始字号）、打印样式全都不受影响。更严重的是：按钮热区不会随缩放变化，用户点中了“看起来缩小的字”，但事件可能没触发在正确位置。真要改文字大小，必须动 font-size。
直接改 style.fontSize 要带单位，否则无效
常见错误是写成 el.style.fontSize = 14，这完全不生效。浏览器会忽略无单位的数值。正确写法必须带单位：
-
el.style.fontSize = '14px'（最直观，适合固定基准） -
el.style.fontSize = '0.875rem'（推荐，继承根字号，响应式友好） -
el.style.fontSize = '80%'（基于父元素计算，注意嵌套层级影响）
如果按钮要支持多次点击切换（正常→小→正常），建议用状态变量记录当前模式，而不是依赖 getComputedStyle 解析字符串——后者在 Safari 中可能返回 medium 这类关键字，解析易出错。
用 class 切换比内联样式更可控
频繁操作 style.fontSize 容易混乱，尤其涉及多个元素或恢复逻辑时。预定义 CSS 类 + classList.toggle() 或 add()/remove() 更稳妥：
立即学习“前端免费学习笔记（深入）”；
button {
font-size: 1rem;
transition: font-size 0.2s ease;
}
.text-shrink {
font-size: 0.85rem;
}
对应 JS：
btn.addEventListener('click', () => {
textEl.classList.add('text-shrink');
// 或用 setTimeout 移除，实现“点击一次缩小，再点恢复”
});
注意：如果要三态（大/正常/小），别只用 toggle()，得配合一个 state 变量判断当前状态再决定加哪个类。
按钮本身要有按下反馈，否则“点击感”缺失
文字缩小只是结果，用户需要明确感知“我点到了”。纯文字变化不够，必须给按钮加物理按压反馈：
- 用
:active配transform: scale(0.95)（仅限按钮自身，不影响文字） - 同步减小
box-shadow模拟压入效果，比如从0 2px 6px rgba(0,0,0,0.2)改为0 1px 3px rgba(0,0,0,0.15) - 加
transition: transform 0.1s, box-shadow 0.1s，避免生硬跳变 - 务必设
outline: none并补:focus-visible样式，兼顾键盘用户
最容易被忽略的是：文字缩小后，按钮内边距（padding）和行高（line-height）是否仍匹配新字号？如果用了 rem 单位且根字号没变，那 padding: 0.75rem 会自动缩，但如果用的是 px，就得手动调——否则按钮看起来“空”或文字贴边。
