应弃用 font 标签的 size 属性，改用 rem/em 设置 font-size；优先 rem（根相对），局部缩放用 em；表单与等宽元素需显式设 font: inherit；js 中 font 相关操作须同步重构。
font 标签的 size 属性在 HTML4.01 就已废弃，HTML5 中完全删除，现代浏览器虽可能解析但不保证行为一致——尤其在暗色模式、系统字体缩放或第三方 CSS 重置下，size="4" 可能渲染成 12px、18px 甚至被直接忽略。
font-size 替换 size 数值要怎么映射
size 的 1–7 是无单位、非线性、浏览器私有的一套编号，没有标准像素对应关系，强行“还原”旧效果反而导致跨设备不一致。更务实的做法是：
- 放弃数值对照表（比如“size=3 ≈ 16px”这种说法只在特定 UA 下成立）
- 以当前设计系统为准，重新定义字号层级：比如
h1用2.5rem，正文用1rem，小字用0.875rem - 若需兼容老页面视觉，建议先测量实际渲染结果（DevTools → Computed → font-size），再反向设定 CSS 值
- 遇到
size="+2"这类相对写法，必须转为相对单位：font-size: 1.5em或font-size: calc(1rem * 1.5)，不能硬写px
rem 和 em 在替换时怎么选
关键区别在于继承锚点：
-
em相对于父元素的font-size，嵌套深了容易失控（比如.card { font-size: 0.9em }会让内部h2也缩小） -
rem始终相对于html元素的font-size，层级清晰，适合全局控制
所以：
- 页面根字号设为
html { font-size: 16px; }（不要设10px来“方便计算”，那会破坏用户默认缩放） - 所有文字大小优先用
rem，如p { font-size: 1rem; }、.caption { font-size: 0.75rem; } - 仅在需要局部缩放时用
em，比如按钮内图标尺寸跟随文字：.btn svg { width: 1.2em; height: 1.2em; }
表单控件和等宽文本容易漏掉继承
input、textarea、button 默认不继承父级 font-size 和 font-family，哪怕你给 body 设了 font-size: 1.125rem，它们仍按浏览器 UA 样式渲染（通常是 13–14px）。
同样，pre 和 code 默认用等宽字体，若要统一 UI 字体，必须显式覆盖：
input, textarea, button { font: inherit; }pre, code { font-family: inherit; }
否则你会看到同一段文字里，普通 p 是 16px 思源黑体，而旁边 input 是 13px Times New Roman。
真正麻烦的不是怎么写 CSS，而是老项目里 font 标签常和 JS 逻辑耦合——比如 document.getElementsByTagName('font') 会返回空 NodeList，或者通过 font.color 动态改样式。这类代码必须同步重构，否则运行时就报错。替换完标签，还得扫一遍脚本里所有对 font 的引用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
