font color属性失效是因为HTML5已废弃标签，浏览器仅作兼容性兜底，实际解析时忽略该属性；应改用配合CSS类控制颜色，并注意继承、优先级及可访问性问题。
font color属性为什么失效
不是浏览器“突然不支持”，而是 HTML5 标准里根本没它——<font></font> 标签已被 W3C 明确标记为 obsolete，Chrome/Firefox/Safari 解析时直接忽略 color 属性，只保留文本内容。你看到颜色还在，是浏览器的向后兼容兜底行为，但这种兜底在暗色模式、SSR 渲染、缩放或无障碍工具中会静默失效。
常见翻车现场：<font color="#e74c3c">错误</font> 在本地开发看着正常，CI 构建时报 W3C 验证失败；上线后 iOS 系统字体缩放开启时文字变黑；Lighthouse 检测提示 “使用废弃标签”，评分直降。
用 span + color 替换 font 的实操要点
真正局部精准控制，靠的是语义化包裹 + CSS 作用域收敛，不是“把 font 换成 style”。
- 用
<span></span>包裹目标文字（不带语义副作用，比<b></b>或<em></em>更中性） - 优先加 class 而非内联
style：比如<span class="text-error">错误</span>，再配 CSS.text-error { color: #d32f2f; } - 避免直接写
<span style="color: #d32f2f"></span>—— 它会锁死样式，后续改主题色时得逐个 JS 清除el.style.color - 如果必须动态设色（如 API 返回状态），用 class 切换：
el.classList.toggle('text-success', status === 'ok')，别直接赋值el.style.color
color 值怎么选才稳
color 属性本身没问题，但值选错会导致兼容性、可访问性或维护性问题。
- 十六进制推荐用
#333或#2196f3，别用#fff这类无对比度的纯白（WCAG AA 不达标） - RGBA 如
rgba(0,0,0,0.87)在 IE8 及以下完全不识别，若需兼容老环境，得 fallback 到#000 - 命名色（如
steelblue）可读性好，但部分屏幕阅读器解析不稳定，且无法参与 CSS 变量计算 - 别混用写法：项目里统一用
#开头或统一用rgb()，否则设计师给色值时对不上
容易被忽略的继承与层叠陷阱
颜色“没生效”十有八九不是写错了，而是被继承链或优先级压住了。
-
color是可继承属性：父容器设了color: gray，子元素没显式覆盖，就会继承——检查「Computed」面板比猜快十倍 - 链接（
<a></a>）默认有:link和:visited状态色，单设color不影响已访问链接，得写a:visited { color: purple; } - 内联
style="color:"优先级高于外部 class，但低于!important（哪怕写在 reset.css 最底部） -
currentColor不是主题变量，它只是当前元素color的实时值；想响应深色模式，得配合@media (prefers-color-scheme: dark)手动重设
真正麻烦的从来不是“怎么写 color”，而是它在哪个上下文里被谁改了、为什么改不动——盯着 DevTools 的「Computed」看，比翻文档更直接。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
