HTML中font-size最可靠方式是CSS属性而非废弃的标签;推荐使用rem单位配合viewport设置和根元素重置,兼顾响应式与可访问性,并注意font-size-adjust等属性优化多字体渲染一致性。
HTML 中 font-size 的基础设置方式
直接控制文字大小,最常用也最可靠的是 CSS 的 font-size 属性,不是 HTML 的 标签(已废弃,不支持现代浏览器)。行内样式、内部样式表、外部样式表都可生效,但优先级和维护性差异大。
常见单位选择影响实际效果:
-
px:绝对像素值,稳定但无法响应缩放或系统字体设置 -
em:相对于父元素font-size,嵌套深时容易失控 -
rem:相对于根元素(html)的font-size,推荐用于全局可控缩放 -
%:同em,基于父级计算,语义清晰但层级依赖强
移动端默认 16px 放大问题与 viewport 关系
iOS Safari 和部分 Android 浏览器在横屏或检测到“小字号文本”时,会强制将根字体放大到约 20px,导致布局错乱或文字意外变大。这不是 bug,是可访问性机制,但常被误认为样式失效。
关键对策是显式声明 viewport 并禁用缩放干扰:
立即学习“前端免费学习笔记(深入)”;
更稳妥的做法是配合重置根字号: