标签在 html5 中已废弃且不生效，现代浏览器忽略其 color、size、face 属性；应改用语义化标签（如 ）配合外部 css 实现可维护、可访问、响应式的样式控制。
font 标签在 HTML5 中已失效，不是“不建议”，而是“不工作”
现代浏览器（Chrome 90+、Firefox、Safari）对 <font></font> 的 color、size、face 属性基本忽略——它可能还显示文字，但样式不会生效。HTML5 规范已将其标记为 obsolete，W3C 验证器会报错，严格 doctype 下甚至被当作未知标签解析。
用 font 标签改样式，实际等于放弃 CSS 继承和响应式能力
常见错误现象：<font color="red">错误</font> 在暗色模式下无法自动反色；<font size="+2"></font> 在移动端缩放失常；<font face="SimSun"></font> 在无中文字体的 Linux 环境直接 fallback 到空白。
-
color属性无法被:hover、@media (prefers-color-scheme: dark)覆盖 -
size="4"是模糊相对值（Firefox 解析为 13.33px，IE 为 14px），而font-size: 1.25rem可继承、可缩放、可被html { font-size: clamp(16px, 1.2vw, 18px); }控制 -
face不支持@font-face、font-display: swap或系统字体栈回退机制
替换时最容易踩的三个坑
不是“换个标签就行”，而是结构逻辑要重理：
- 别用
style="color:red"替代<font></font>——它和<font></font>本质一样，都是把表现硬塞进 HTML - 别盲目正则替换
<font.>(.*?)</font.>——会误伤注释、JS 字符串、富文本内容，推荐用 Cheerio 或 browser devtools 定位真实生效实例 - 别照搬旧 size 值换算：旧
size="3"≈ 16px 是经验估值，应按当前设计系统重新定义字号层级（如h1用2.5rem，正文用1rem）
真正该做的：用语义化标签 + class + 外部 CSS
例如把 <font color="red" size="4">密码错误</font> 改为：
<p class="form-error">密码错误</p>
CSS 写在外部文件里：
.form-error {
color: #d32f2f;
font-size: 1.125rem;
font-weight: 500;
}
这样改一次类名，全站错误提示同步更新；加个 @media (prefers-reduced-motion: reduce) 也能统一控制动画；屏幕阅读器能识别 class="form-error" 的语义意图，而 <font color="red"></font> 对它来说只是“一段红字”。
最常被忽略的一点：老项目里 <font></font> 往往和 JS 逻辑耦合（比如 document.getElementsByTagName('font')），替换完 HTML 后，必须检查并更新所有相关脚本，否则运行时会返回空 NodeList。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
