在html5中被浏览器完全忽略而非失效，因其被视为无意义容器，color等属性被丢弃；应转为语义化class如text-error并统一css管理，避免内联样式与!important滥用，同时检查js中对font.color的直接操作。
font标签color属性为什么完全不生效
不是“失效”，而是浏览器根本不再解析<font color></font>的样式属性。Chrome、Firefox、Safari 在 HTML5 模式下会把<font></font>当作无意义的普通容器，只保留文本内容，color、size、face全部丢弃。你在 DevTools 里看到文字没变色，不是 CSS 覆盖了它，是它压根没被当成样式指令处理过。
怎么批量替换font color为CSS类
别用正则全局替换成style="color: #xxx"——那只是把技术债从一处挪到另一处。正确做法是提取颜色语义，转成可复用的 class：
- 把
<font color="#d32f2f">错误</font>→<span class="text-error">错误</span> - 把
<font color="#1976d2">提示</font>→<span class="text-info">提示</span> - 在
<style></style>或外部 CSS 文件中统一定义：.text-error { color: #d32f2f; }、.text-info { color: #1976d2; }
这样改完后，主题切换、深色模式适配、无障碍对比度调整都只需改一处 CSS，而不是遍历所有 HTML 文件。
全局控制时color继承和优先级怎么不踩坑
color天然继承，但容易误判“没生效”。常见陷阱：
-
设了color: #333，但<a></a>还是蓝色——因为浏览器默认样式表里a:link { color: -webkit-link; }权重更高，得显式写a { color: inherit; }或a:link, a:visited { color: #333; } - 父元素用了
!important，子元素的 class 就会被压制，哪怕你写了.text-error { color: #d32f2f !important; }也不行——!important不是解药，是冲突放大器 - 深色模式下，
color: #333在黑色背景上几乎不可读，必须配合@media (prefers-color-scheme: dark)重设
真正管用的检查方式：打开 DevTools → Elements 面板 → 选中文字元素 → 看右边「Computed」标签页里color最终值和来源路径，比猜快十倍。
旧项目迁移时最常漏掉的一件事
把<font></font>删了之后，别忘了检查是否还有 JS 直接操作font.color属性。比如document.querySelector('font').color = 'red'这种代码，在现代 DOM 中会静默失败（font元素没有color可写属性），但也不会报错，结果就是颜色“突然不更新”了。得同步改成el.classList.add('text-error')或el.style.color = '#d32f2f'。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
