font 标签的 color 属性自 HTML 4.01 起被废弃，HTML5 中已移除，应使用语义化标签配合 CSS color 控制颜色，避免内联样式以保障可维护性、主题切换与无障碍。

font 标签的 color 属性早已被废弃

不推荐使用，也不该在新项目中出现。<font color="red"> 这类写法自 HTML 4.01 起就被标记为“不赞成（deprecated）”，HTML5 中已完全移除。浏览器虽可能仍渲染，但属于历史兼容行为，无标准保证，且与语义化、可维护性、无障碍原则直接冲突。

替代方案：用 CSS 的 color + 语义化标签

核心是两步走：选对 HTML 元素，再用 CSS 控制颜色。不要为了改颜色而套 <font> 或 <span> —— 先问“这段文字是什么角色”：

• 标题？用 <h1>～<h6>，然后配 h1 { color: #2c3e50; }
• 强调词？用 <em> 或 <strong>，再通过 class 控制颜色：<em class="warning">注意</em> + .warning { color: #e74c3c; }
• 纯样式需求？用 <span> 加 class，而非内联 style：<span class="highlight">关键值</span>，避免 style="color:red"

为什么不用内联 style="color:..."？

它虽有效，但破坏样式集中管理，导致难以批量调整、主题切换困难、CSS 优先级混乱。常见问题包括：

• 多个 style="color:..." 散落在模板中，改主色调时要全文搜索替换
• 与外部 CSS 冲突时，内联样式权重高，调试时容易误判来源
• 无法利用 CSS 变量做主题色统一：color: var(--primary-text); 在内联 style 中不生效
• SSR/静态站点生成时，内联样式可能被 purify-css 等工具误删

如果必须兼容老旧系统或富文本编辑器输出？

别妥协渲染逻辑，而应在数据层清洗或运行时转换：

• 服务端解析 HTML 时，用正则或 DOM 解析器将 <font color="..."> 替换为 <span style="color:...">（仅限过渡期）
• 前端加载后，用 JS 批量替换：document.querySelectorAll('font[color]').forEach(el => { el.replaceWith(...); });
• 富文本编辑器（如 TinyMCE、CKEditor）配置输出格式，禁用 <font>，强制转为 class 或 data-* 属性

真正难的不是怎么让 color 生效，而是让颜色变化有意义——它该反映信息层级、状态（error/success）、或品牌系统，而不是随手一涂。