HTML5中<font color>完全无效，必须用CSS的color属性设置文字颜色，支持十六进制、RGB、HSL等值，需注意继承性、对比度合规（≥4.5:1）及语义化类名管理。
别用 <font color> —— 它在 HTML5 中已被移除，不是“不推荐”，是根本无效。
为什么 <font color="red"> 看似能用但实际不可靠
现代浏览器（Chrome、Firefox、Safari）对 <font> 标签的 color 属性不做解析，仅靠容错机制可能临时渲染出颜色，但控制台必报 Deprecated tag 'font' 警告；Lighthouse 检测直接扣分；CI/CD 流水线常因 HTML 验证失败而中断。更关键的是：该属性在 XHTML 1.0 Strict 及所有 HTML5 文档类型中无定义，document.querySelector('font[color]') 查不到对应 DOM 属性，JS 也无法读取或修改它。
真正生效的局部文字着色方式只有三种
所有方案都基于 CSS color 属性，且必须作用于文本容器元素（如 <p>、<span>、<div>）：
- 内联样式：
<span style="color: #d32f2f;">错误提示</span>—— 快速验证，但禁止大量使用 - 语义化 class：
<span class="text-error">错误提示</span>，配合.text-error { color: #d32f2f; }—— 推荐，便于统一维护与 WCAG 对比度检查 - 行内
style块（仅限极简页面）：<style> .highlight { color: rebeccapurple; } </style>+<span class="highlight">重点内容</span>
注意：color 只影响文本前景色，不影响背景；若父元素已设 color，子元素未覆盖则继承——这是文字“意外变色”的最常见原因。
颜色值写法差异与兼容性陷阱
不同写法在老旧环境表现不一：
-
red、tomato等命名色：全浏览器支持，但色值不易精确控制，且部分名称（如orange）在 IE8- 中不被识别 -
#f00、#ff6b35：推荐首选，简洁、兼容性好、易比对 -
rgb(255, 107, 53)：支持透明通道（rgba），但 IE8 及更早版本不支持 -
hsl(14, 100%, 60%)：适合设计师调色，但 Safari 旧版有解析 bug
严禁混用写法：同一项目里同时出现 color: red; 和 color: #ff0000; 会导致 CSS 变量替换、主题切换、自动化检测全部失效。
最容易被忽略的对比度翻车点
写了 color: white; 却没配 background-color？默认白色背景会让文字“消失”。这不是 bug，是对比度崩了。
检查方法很简单：打开开发者工具 → 选中元素 → 切到 Computed 标签页 → 找 color 和 background-color 的最终计算值 → 看右上角是否显示 “AA” 或 “AAA” 合规标识。正文至少要达到 4.5:1，否则色弱用户根本无法阅读。
上线前务必用浏览器自带的“暗色模式”开关测试——很多 color: #333; 在深色背景下会变成不可读的灰黑。
