应使用 css 的 color 属性设置文字颜色，而非废弃的 font 标签；推荐外链或内联 css，避免行内 style 覆盖问题；注意继承、currentcolor 用法、暗色模式对比度及 wcag 合规性。
用 color CSS 属性改文字颜色，不是用 html 标签
HTML 本身没有“设置文本颜色”的属性，font 标签的 color 属性早已被废弃（html5 不支持），硬写进去浏览器可能渲染但会报警告，也不保证兼容。真正该用的是 CSS 的 color 属性。
常见错误现象：<font color="red">文字</font> 在现代项目里跑通了，但 CI 检查失败、Lighthouse 打分低、同事 PR 评论“请用 CSS”。
- 推荐写法：内联样式
style="color: #333;"或外链 CSS 中写p { color: #333; } - 颜色值支持多种写法：
#f00、rgb(255, 0, 0)、hsl(0, 100%, 50%)、rebeccapurple等，但别混用命名色和十六进制在同个项目里，维护时容易对不上 - 注意继承：父元素设了
color，子元素没覆盖就会沿用——有时文字突然变色，查半天发现是上层div的样式透下来了
currentColor 是个隐藏利器，但容易误以为它“自动适配主题”
currentColor 不是动态主题变量，它只是当前元素 color 属性的值，拿来复用而已。比如边框、图标 SVG 填充想和文字同色，就用它。
使用场景：按钮带 icon，文字变色时 icon 也要同步；或者用 SVG 内联时不想写死 fill 颜色。
立即学习“前端免费学习笔记（深入）”；
- 正确用法：
border: 1px solid currentColor;或fill: currentColor;（SVG 元素内） - 常见错误：以为
currentColor能响应暗色模式切换——它不能，得配合@media (prefers-color-scheme: dark)手动重设color - 兼容性没问题，IE9+ 都支持，但别在伪元素
::before里指望它读取父级 color，有些老版本 safari 渲染异常
行内样式 style="color: ..." 看似快，但一不小心就覆盖不了
行内样式优先级高于外部 CSS 和 <style></style>，所以一旦写了 style="color: red"，后面用类名想改成蓝色，不加 !important 就无效——而 !important 又埋下更难解的冲突。
典型翻车现场：组件库里按钮文字颜色被业务代码的行内 style 锁死，改样式表没反应，最后只能去 js 里改 el.style.color = ''。
- 建议只在原型调试或极简静态页用行内 color；中大型项目统一走 class 控制
- 如果必须动态改色（比如状态反馈），用 JS 切换 class 更可控，例如
el.classList.toggle('text-Error') - 注意：React/Vue 中用
style={{ color: status === 'error' ? 'red' : 'inherit' }}是 OK 的，框架会帮你处理内联样式的更新逻辑
暗色模式下文字发灰看不清？别只改 color，漏了 background-color
只给 color 加媒体查询，背景还是白的，文字变成浅灰——这不是颜色设错了，是对比度崩了。
WCAG 至少要求 4.5:1 的文本/背景对比度，纯靠人眼判断不准，尤其灰色系。
- 实操建议：用浏览器 DevTools 的无障碍检查（Accessibility panel）点开“Contrast ratio”，它会实时标红不合规的组合
- 别写死
color: #666这种中间灰，暗色模式下换成#e0e0e0或直接color: CanvasText（CSS 系统色） - 系统色如
CanvasText、ButtonText是可靠的，但 IE 不支持，如需兼容得 fallback
事情说清了就结束。最常被忽略的其实是对比度验证——很多人调完 color 就以为完事了，结果用户开暗色模式第一眼就看不清。