font-size必须带单位（如px、rem），否则无效；js中需写成字符串形式；推荐用class统一控制，避免内联样式和transform缩放替代字号调整。
font-size 必须带单位，否则无效
只写 font-size: 16 不会生效——浏览器无法解析无单位的数值。常见单位有 px、em、rem 和 %，其中 px 最直观，rem 更适合全局缩放控制。
容易踩的坑：
- 写成
el.style.fontSize = 16（缺引号和单位），JS 中必须是字符串：el.style.fontSize = '16px' - CSS 中漏掉分号或单位，整条规则可能被忽略
- 父元素设置了
font-size: 0或重置了继承链，导致按钮字体被压缩为不可见
用 class 控制比内联 style 更可靠
给 <button></button> 加 style="font-size: 20px" 虽快，但难以复用、不易响应式、且易被更高优先级样式覆盖。
推荐做法：
- 定义统一类名，如
.btn-lg { font-size: 1.5rem; padding: 12px 24px; } - 确保该类选择器权重足够（避免被
button { font-size: 12px; }这类泛匹配覆盖） - 移动端注意：iOS Safari 对小于
16px的字体默认放大，可能引发布局跳动，建议最小设为16px或用rem配合根元素基准
按钮文字撑出容器？检查 white-space 和 box-sizing
增大 font-size 后按钮变高、文字换行或溢出，往往不是字体问题，而是排版约束缺失。
关键配置：
-
white-space: nowrap防止按钮内文本意外折行（尤其含空格的长文案） -
box-sizing: border-box确保padding不额外增加按钮总宽高 - 避免直接设
height，改用padding控制视觉高度；否则字体一调，按钮就错位 - 若按钮宽度固定，加
overflow: hidden+text-overflow: ellipsis防止文字撑破
为什么别用 transform: scale() 改“字体大小”
transform: scale(1.2) 看起来按钮变大了，但它没改 font-size，只是图形拉伸。
后果很实际：
- 点击热区仍按原始尺寸计算，用户点偏了却以为自己手抖
- 屏幕阅读器读出的仍是原始字号，无障碍支持失效
- 打印时缩放丢失，纸面输出还原为原始大小
- 行高、字间距、图标对齐全部失准，尤其搭配 SVG 或 icon font 时明显错位
真要放大文字，就动 font-size；要交互反馈，transform: scale() 可用于 hover 或 active 状态，但不能替代语义化的字号调整。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
