标签违背语义化原则，将样式混入html结构，破坏可维护性、可访问性与响应式能力，应使用css分层控制字体样式。
<font></font> 标签不能用，根本原因不是“它坏了”或“浏览器不支持”，而是它直接违反了「样式与内容分离」这一现代 Web 开发的底层原则——一旦用了，HTML 就不再是结构描述，而成了样式草稿纸。
为什么<font></font>标签违背语义化
HTML 的本质是描述“这是什么”，不是“它长什么样”。<font></font> 标签干的是纯样式活：指定颜色、大小、字体，完全不表达任何语义。比如：
<p><font color="red" size="5">错误提示</font></p>
这段代码里，<font></font> 没告诉任何人“这是个错误”，只说了“红的、大的”。屏幕阅读器忽略它，搜索引擎不从中提取语义，开发者后期想统一改错误提示样式时，得满项目搜 <font color="red"></font> —— 而不是改一个 CSS 类。
- 它无法被 CSS 选择器精准控制（没有 class、id、语义类型）
- 它强制把样式逻辑写死在 HTML 层，破坏可维护性
- 它让同一类信息（如警告、标题、引用）在源码中失去统一结构
font-family 和 <font face></font> 的关键区别
<font face="Microsoft YaHei"></font> 是硬编码字体名，依赖用户本地安装；而 CSS 的 font-family 支持字体栈、回退机制和通用字体族：
p { font-family: "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif; }
这种写法能应对各种环境，且可被媒体查询、CSS 变量、@font-face 动态接管。而 <font face></font> 完全无法响应式、无法继承、无法被 :hover 或 :focus 等伪类修改。
-
<font face></font>不支持字体加载控制（如font-display: swap） -
<font face></font>无法与自定义字体（WOFF2）配合使用 - 现代浏览器已移除对
<font></font>的部分渲染支持（如 Chrome 90+ 对size属性的解析降级）
替代方案怎么选：行内 style 还是外部 CSS
紧急调试时，style="color: red" 比 <font></font> 略好一点，但仍是权宜之计。真正合规的做法是分层处理：
- 全局基础样式 → 外部
.css文件（如重置body字号、默认字体栈） - 组件级样式 → 类选择器（如
.error-text { color: #d32f2f; font-weight: 500; }） - 状态变化 → 用 class 切换（如
.input--invalid），而非动态改style属性
注意：font 这个 CSS 复合属性虽可用，但易出错——必须按 font-style font-weight font-size/line-height font-family 顺序写，且 font-size 和 font-family 不可省略，否则整条声明失效。
容易被忽略的兼容性细节
很多人以为“只要不用 <font></font> 就安全了”，但实际还有几个坑：
- 中文字体名必须加英文引号：
font-family: "PingFang SC", "Hiragino Sans GB";，漏引号会导致整个字体栈失效 -
font-weight数值写成bold或700都可以，但不同字体对数值的支持差异大（比如某些中文字体不响应600） - 系统字体优先级高于 Web 字体，
@font-face加载失败时，若没配好回退字体，可能显示空白或方块
最麻烦的不是语法写错，而是把字体选择当成“视觉设计问题”来处理，忘了它是可访问性、国际化、性能加载链的一环。
