<font color> 标签在 HTML5 中已被完全移除，属废弃元素，浏览器会警告且行为不可靠；应使用 <span> 包裹目标文字并配合 CSS 的 color 属性实现局部精准控制。
<font color> 标签在现代 HTML 中不能用于实现文字颜色的局部精准控制——它已被 HTML5 完全移除，浏览器虽可能渲染，但会触发控制台警告，且行为不可靠。
如果你看到某段代码里还用着 <font color="blue">，那不是“还能用”，而是“还没被彻底淘汰前的侥幸”。
为什么 <font color> 不再适用
- HTML5 规范中已删除
<font>标签，W3C 明确标记为废弃（obsolete） - Chrome、Firefox、Safari 在 DevTools 控制台会报出类似警告：
The <font> element is obsolete. Use CSS instead. - 某些严格模式解析器（如 XHTML 或某些 SSR 渲染引擎）会直接忽略该标签，导致文字回退到默认色
-
color属性不支持 CSS 变量、渐变、透明度（如rgba()）、HSLA 等现代取值，灵活性为零
替代方案：用 CSS 实现真正局部精准控制
局部精准 = 控制某几个字、某个词、甚至一个字符，而不影响周边文本。这靠的是语义化包裹 + 精确作用域的 CSS。
- 用
<span>包裹目标文字（语义清晰、无样式副作用） - 通过
style属性内联设置，或加class复用样式 - 颜色值推荐用十六进制（如
#2196f3）或命名色（如steelblue），避免老式 IE 兼容问题
<p>订单状态：<span style="color: #4caf50">已完成</span>｜<span style="color: #ff9800">处理中</span></p>
- 若需动态切换（比如根据 API 返回值变色），可配合 JS 修改
span.classList或span.style.color - 注意：不要给
<span>加多余 margin/padding，否则可能破坏行高对齐；必要时加display: inline-block再调
容易踩的坑：继承性与层叠优先级
-
color是可继承属性。如果父容器设了color: gray，而你只给子<span>设color: red，它能生效；但若父容器用了!important，你的内联样式也可能被压住 - 内联
style="color:..."优先级高于 class，但低于!important声明（哪怕写在外部 CSS 文件里） - 使用开发者工具检查「Computed」面板，确认最终生效的
color值和来源，比猜更可靠
真正需要局部精准控制颜色时，<font color> 是条死路。用 <span> + color 才是稳定、可维护、可测试的路径。最常被忽略的一点是：颜色本身没有“局部”概念，只有作用范围可控的元素才有——所以关键从来不是“怎么设色”，而是“把色设给谁”。
