现代网页文字大小应使用 rem 配合根元素动态调整，或 CSS3 的 clamp() 实现流体缩放；禁用 font、zoom 和 transform: scale() 等破坏可访问性的方案。
HTML 文字大小不能靠 <font size></font> 或内联 style="font-size:xx" 硬调——现代项目里，该用 CSS3 的响应式缩放机制，而不是手动改每个 font-size。
用 rem 配合 html 根元素动态改字体基准
这是最主流、最可控的方式：所有 rem 单位都基于 html 元素的 font-size 值。改根字号，全站文字等比缩放。
- 默认浏览器根字号是
16px，所以1rem === 16px - 在
:root或html上设font-size: 18px，那1.5rem就变成27px - 配合媒体查询可做断点适配：
@media (max-width: 768px) { html { font-size: 14px; } } - 注意：不要在
html上写!important或行内style，否则 JS 动态修改时可能被覆盖
用 clamp() 实现流体字号（CSS3 新增核心能力）
clamp() 是 CSS3 真正解决“字号随视口平滑变化”的方案，不用 JS、不依赖媒体查询断点。
- 语法是
clamp(最小值, 建议值, 最大值)，比如：h1 { font-size: clamp(1.25rem, 4vw, 2.5rem); } - 其中
4vw表示视口宽度的 4%，在小屏下不会小于1.25rem，大屏下不会超过2.5rem - ⚠️ Safari 13.4+、Chrome 84+、Firefox 79+ 才支持；旧版需加降级：
h1 { font-size: 2rem; font-size: clamp(1.25rem, 4vw, 2.5rem); } - 别对所有文本无脑套
clamp()——标题适合，正文段落建议仍用rem+ 固定阶梯
避免用 zoom 或 transform: scale() 调文字大小
这两个看似能“放大文字”，但本质是图形缩放，会破坏可访问性与布局流，属于典型误用。
立即学习“前端免费学习笔记（深入）”；
-
zoom是非标准属性，仅 IE/Chrome 支持，font-size不变，屏幕阅读器读的还是原始字号 -
transform: scale(1.2)会让文字边缘发虚（尤其非整数倍），且触发新层叠上下文，可能遮挡下拉菜单或弹窗 - 如果真要全局缩放（如无障碍模式），应改
html的font-size，再让所有文字用rem，而非视觉欺骗
真正关键的不是“怎么调大”，而是“谁来控制缩放权”：用户系统字号设置、浏览器默认缩放、CSS 自适应逻辑，三者要对齐。漏掉 html { font-size: 100% } 或没重置 body 的 font-size，就容易导致嵌套计算失准。
