应使用 CSS color 属性而非废弃的 标签；推荐十六进制色值，注意继承与覆盖问题，用语义化 class 管理颜色并兼顾高对比度模式适配。
直接用 color CSS 属性，别碰 <font></font> 标签——它早被废弃，现代浏览器只当空气。
为什么 <font color="red"></font> 不起作用
这个标签在 HTML5 中已移除，Chrome、Safari、Firefox 都不会解析它的 color 属性。即使页面看似变色，也只是浏览器对错误标签的容错渲染，不可靠，且控制台会报 Deprecated tag 'font' 警告。
- 写
<font color="red">文字</font>→ 无效，别试 - 写
<p style="color: red;">文字</p>→ 有效，立刻生效 - 若必须兼容极老系统（如 IE8），也该用
style，而非复活<font></font>
color 值怎么选：十六进制、RGB、HSL、命名色的区别
四种写法都合法，但适用场景不同：
-
#333或#2E86AB：最稳，兼容所有浏览器，手写快，推荐正文主色 -
rgb(51, 51, 51)：适合 JS 动态生成颜色，比如color: rgb(${r}, ${g}, ${b}) -
rgba(51, 51, 51, 0.8)：加透明度，但注意：它只影响文字本身，不改变背景，常被误用于“半透文本”效果 -
hsl(210, 20%, 40%)：调色方便，比如想把所有蓝色统一变浅，改l%就行；但 IE9– 不支持 -
tomato、steelblue：仅限原型或教学，标准名只有约 140 个，rebeccapurple是唯一新增的，别信拼出来的名字（如lightseagreen可以，lightsea-green不行）
写了 color 却没变色？优先查这三处
不是语法错，而是被覆盖、继承错位或压根没内容：
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → Elements → 选中元素 → 切到 Computed 标签页，看
color值是否被划掉（strike-through）。点来源就能看到哪条规则赢了 - 检查是否设在容器上，但实际文字在
::before或<span></span>里——伪元素和子元素可能重置了color，或用了inherit却父级没值 - 确认元素真有文本节点：
<div class="error"></div>设再红的color也看不见；用console.log(el.textContent.trim())快速验证
用 class 管理颜色比写 style 强在哪
内联样式看着快，但一上项目就失控：
- 改主题时要搜全站
style="color:，漏一个就露馅；而.text-danger { color: #dc3545; }改一处全更新 - 类名要语义化：
.text-success比.green-text好——换主题时绿色可能变成蓝，但“成功”含义不变 - 避免
!important：它会让后续调试变成猜谜。真要破权重要么提升选择器精度（如body .header h1），要么抽成自定义属性（--text-primary: #111;） - 移动端高对比度模式下，系统可能强制覆盖
color。加一层@media (forced-colors: active)兜底，比如.text-error { color: ButtonText; }，别写死值
真正麻烦的从来不是“怎么写对 color”，而是谁来管它、在哪定义、改的时候会不会牵一发而动全身——类名设计、变量抽象、媒体查询兜底，这些才是上线前卡住人的地方。
