<font>标签在HTML5中已被废弃，因其违反结构与表现分离原则，缺乏响应式、可访问性和跨浏览器一致性，应统一用CSS替代。
标签在现代 HTML 中已被废弃（obsolete），不能用于符合 HTML5 标准的文档。如果你在旧项目里看到它，或正在维护遗留代码，它确实曾用来直接控制字体、颜色和大小；但今天所有新项目都应改用 CSS。
为什么 <font> 会被废弃？
浏览器厂商和 W3C 明确将 <font> 标记为 obsolete，原因很实际：
- 它把样式逻辑硬编码进 HTML 结构，违反“结构与表现分离”原则
-
face、color、size属性无法响应式适配，也不支持继承、媒体查询等现代样式能力 - 不同浏览器对
size="5"或face="隶书"的渲染差异大，尤其在 macOS / Linux 上常 fallback 到默认字体 - 无障碍（a11y）工具基本忽略
<font>的语义，导致屏幕阅读器无法正确传达文本层级或强调意图
<font> 的三个核心属性怎么映射到 CSS？
如果你必须读懂一段含 <font> 的老代码，可以按以下方式逐项转换：
-
face="微软雅黑"→ 对应font-family: "Microsoft YaHei", sans-serif;（注意加引号，且必须提供 fallback 字体） -
color="#333"→ 直接对应color: #333;，但建议统一用 CSS 类而非内联 style -
size="4"→ 不是固定像素值：HTML 的size是相对标尺（1–7，默认 3），size="4"≈font-size: 16px或1em，但更稳妥的是用rem或em重设基准
示例对比：
立即学习“前端免费学习笔记（深入）”；
<font face="楷体" color="red" size="5">标题</font>
应改为：
<span class="title-chinese">标题</span>
并在 CSS 中定义：
.title-chinese { font-family: "KaiTi", "STKaiti", serif; color: red; font-size: 1.25rem; }遇到 <font> 嵌套或错位怎么办？
老代码里常见 <font><p>文本</font></p> 这类非法嵌套，或 <font><font>多层嵌套</font></font>。这类结构在 HTML5 解析中会触发纠错模式（parser correction），结果不可预测：
- 浏览器可能自动闭合第一个
<font>，导致样式意外中断 - 某些情况下
color和size会叠加出奇怪效果（比如size="+1"再套size="+1"并不等于size="+2"） - 若混用
<font>和 CSS（如外层style="color:blue"+ 内层<font color="red">），最终颜色取决于层叠顺序，但<font>权重极低，容易被覆盖
修复策略只有两个字：**替换**。不要尝试修嵌套，而是提取文本内容，用语义化标签（<h2>、<span>、<strong>）包裹，再统一用 CSS 控制外观。
真正棘手的不是语法转换，而是那些依赖系统字体（如 face="华文彩云"）的老页面——它们在多数 Linux 或新版 Windows 上根本不存在，CSS 的 font-family fallback 机制此时才显出价值。别省那几行 CSS。
