HTML中font-size最可靠方式是CSS属性而非废弃的标签；推荐使用rem单位配合viewport设置和根元素重置，兼顾响应式与可访问性，并注意font-size-adjust等属性优化多字体渲染一致性。
HTML 中 font-size 的基础设置方式
直接控制文字大小，最常用也最可靠的是 CSS 的 font-size 属性，不是 HTML 的 <font></font> 标签（已废弃，不支持现代浏览器）。行内样式、内部样式表、外部样式表都可生效，但优先级和维护性差异大。
常见单位选择影响实际效果：
-
px：绝对像素值，稳定但无法响应缩放或系统字体设置 -
em：相对于父元素font-size，嵌套深时容易失控 -
rem：相对于根元素（html）的font-size，推荐用于全局可控缩放 -
%：同em，基于父级计算，语义清晰但层级依赖强
移动端默认 16px 放大问题与 viewport 关系
iOS Safari 和部分 Android 浏览器在横屏或检测到“小字号文本”时，会强制将根字体放大到约 20px，导致布局错乱或文字意外变大。这不是 bug，是可访问性机制，但常被误认为样式失效。
关键对策是显式声明 viewport 并禁用缩放干扰：
立即学习“前端免费学习笔记（深入）”；
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
更稳妥的做法是配合重置根字号：
html { font-size: 16px; }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
html { font-size: 16px; }
}
不同设备/系统对 font-size 的实际渲染差异
Windows 的 ClearType、macOS 的 Quartz、Android 的 Roboto 渲染引擎不同，相同 px 值下视觉大小和清晰度有差别；而 iOS 系统设置里的「更大字体」开关会直接放大整个页面的 rem 基准——这意味着仅靠固定 px 无法兼顾可访问性。
适配建议：
- 用
rem+ JavaScript 动态读取document.documentElement.style.fontSize做 fallback - 避免在
font-size中混用px和rem，尤其不要在组件库中写死14px再套rem计算 - 测试时打开系统「增大文字」或「粗体文本」选项，观察是否出现截断、重叠或溢出
font-size-adjust 和 font-optical-sizing 这类冷门但关键的属性
当字体回退（fallback）发生时，比如指定 "Helvetica", "PingFang SC", sans-serif，不同字体的 x-height（小写字母 x 高度）差异会导致同样 16px 下视觉大小明显不一致。这时 font-size-adjust 能按比例校正：
p { font-size: 16px; font-size-adjust: 0.5; }
font-optical-sizing: auto 则让支持的字体（如 Inter、IBM Plex）自动切换字重和字宽以适配尺寸，提升小字号可读性。但它在旧版 Safari 中需加 -webkit- 前缀，且只对可变字体有效。
这些属性不解决“调大调小”的基本需求，但在多字体、多语言、小屏阅读场景下，是决定文字是否真正“清晰可用”的分水岭。
