用font-size配合CSS类控制文字大小最稳妥，应优先使用rem、em或无单位倍数定义通用class（如.text-sm{font-size:.875rem}），避免像素命名和行内style，以保障响应式、可维护性及无障碍缩放。
直接用 font-size 配合 CSS 类控制文字大小最稳妥，别碰已废弃的 <font> 标签或内联 style 写死数值。
怎么写一个通用的文字大小 class
定义 class 时优先用相对单位（em、rem）或无单位倍数（1.2），避免固定像素导致缩放/适配问题：
-
.text-sm { font-size: 0.875rem; }—— 对应 14px（基于根元素 16px） -
.text-lg { font-size: 1.125rem; }—— 对应 18px -
.text-scale { font-size: 1.2; }—— 相对于父元素当前字号放大 20%
不要写 .text-14 { font-size: 14px; }，这类“像素命名 class”后期维护成本高，且在高 DPI 屏幕或用户缩放时表现僵硬。
为什么 class 比行内 style 更适合入门控制文字大小
行内 style="font-size: 16px;" 看似简单，但会覆盖外部样式表规则，且无法复用；用 class 可统一管理、批量调整、配合媒体查询响应式缩放：
立即学习“前端免费学习笔记（深入）”；
- 改一处 class 定义，全站对应文字同步变化
- 配合
@media (max-width: 768px)可单独调小移动端字号 - 支持无障碍：用户自定义字体大小时，
rem能跟随浏览器设置缩放，px会锁死
容易被忽略的继承与重置问题
某些标签自带默认字号（如 <h1> 是 2rem，<small> 是 0.83em），直接加 class 可能被继承干扰：
- 对标题类元素，建议显式重置：
.text-base { font-size: 1rem !important; }（仅当必要时用!important） - 避免嵌套过深导致
em层层相乘（<p class="text-sm"><span>文字</span></p>中span会再缩一次）—— 改用rem更可控 - 检查是否意外继承了父容器的
font-size，可用浏览器开发者工具的“Computed”面板验证最终生效值
真正麻烦的不是设字号，而是设完后发现 <button> 里文字没变、<input> 里字号错位、或者打印样式里全乱了——这些都得靠 class 统一收口，而不是逐个打补丁。
