最稳妥的字体设置方式是先用 font-size: 16px 统一根元素基准，再用 rem 确保缩放稳定；进阶需结合 css 变量定义 –base-font-size、clamp() 实现响应式弹性字号、font-size-adjust 提升小字号可读性。
用 font-size 直接设值是最稳妥的起步方式
别一上来就搞 CSS 变量或媒体查询，先确认基础是否生效：font-size 支持像素（px）、相对单位（em、rem）、百分比（%）等。多数情况下，对 body 或根元素设 font-size: 16px 是起点，后续用 rem 才能稳定缩放。
常见错误是混用单位导致层级失控：比如父元素用 em，子元素再套 em，结果放大倍数叠乘。建议优先用 rem（相对于 :root），避免继承链干扰。
-
1rem默认 = 浏览器默认字号（通常 16px），可被用户系统设置影响 - 设
html { font-size: 10px; }后，1.4rem就 = 14px，计算更直观 - 慎用
!important强制覆盖，容易在响应式断点里引发冲突
用 --base-font-size CSS 变量统一接管所有文字尺寸
真正“统一控大小”的核心不是写一堆 font-size，而是把基准值抽成变量，让所有尺寸都基于它计算。比如定义：
:root {
--base-font-size: 16px;
}
<p>h1 { font-size: calc(var(--base-font-size) <em> 2); }
p { font-size: var(--base-font-size); }
small { font-size: calc(var(--base-font-size) </em> 0.8); }
这样改一个变量，全文案尺寸同比例缩放。注意：calc() 是必须的——CSS 变量不能直接参与运算，var(--base-font-size) * 1.5 会报错，必须包一层 calc()。
- 变量名推荐带语义，如
--text-base比--fs更易维护 - 变量可动态改：JS 中执行
document.documentElement.style.setProperty('--base-font-size', '18px')即实时生效 - 不要在
@media里重复定义同名变量，应在外层统一设，媒体查询内只改值
响应式文字大小别只靠 media query 写死断点
纯用 @media (max-width: 768px) { p { font-size: 14px; } } 很脆弱——屏幕宽度只是参考，用户缩放、系统字体偏好、DPR（设备像素比）都会影响实际阅读体验。更健壮的做法是结合 clamp()：
立即学习“前端免费学习笔记（深入）”；
