许多前端开发者常常忽略一个关键事实:标签在HTML5中已被正式废弃,不再是“不推荐使用”,而是标准层面直接移除了color、size、face等样式属性。在标准文档声明()下,浏览器会完全忽略这些属性,文字仅按默认样式渲染。偶尔看到的“还能用”,大多是浏览器回退到怪异模式(quirks mode)时的兼容行为,或是CSS层叠恰好覆盖了默认值——这种依赖极不可靠,随时可能失效。
font 标签在现代 HTML 中根本不能用
并非“不推荐”,而是HTML5标准已移除 标签的全部样式属性(color、size、face)。浏览器在 下解析时,会忽略这些属性,文字仍采用默认样式。你所见的“偶尔生效”,大概率是浏览器在怪异模式(quirks mode)下兼容旧行为,或CSS层叠意外覆盖了默认值——这种写法无法信赖。
常见错误现象和实际表现
将 错误提示 写入页面后:
- 文字仍为黑色,控制台出现警告:
The element is obsolete. Use CSS instead. size="4"无法改变字号,face="Microsoft YaHei"不会切换字体- 即使临时显示正确,也无法响应暗色模式、无法被
:hover修改、不能继承父级font-size缩放 - 屏幕阅读器访问时,该标签不传递任何语义,“红色”并不等于“错误”,只是视觉巧合
替代方案:用 style 属性快速迁移
如果你正在维护旧代码或需要最小改动上线,直接替换 为带 style 的通用标签(如 或语义化标签),是最稳妥的过渡方式:
青蓝色文字青蓝色文字
注意:font-size 单位优先使用 px 或 rem,避免使用 size 数字(1–7)这种无意义的缩放等级;color 值写法不变,但载体必须是 CSS 属性。
真正该做的:按语义选标签 + 外部 CSS 控制
从长远来看,硬编码样式到 HTML 会积累技术债务。你应该:
- 用
表达强调,表达语气,表达时间——让结构本身具备语义 - 为不同语义内容添加 class,例如
或 - 在外部 CSS 或
块中统一定义:.error-text { color: #d32f2f; font-weight: 500; } - 避免使用
font简写属性(如font: bold 16px/1.4 sans-serif),它容易因漏写font-size或font-family导致整条声明失效
最常被忽略的一点:哪怕只改一处颜色,也别再碰 。它不是“还能用”,而是“正在悄悄破坏可访问性和维护性”。
