应使用 CSS 控制字体样式，禁用已废弃的 标签；font-family 需提供带通用族的字体列表，font-size 推荐用 px 单位，color 优先用十六进制或 rgb()；须避免行内重复书写、中英字体名混用及大小写错误，并注意 system-ui 的兼容性问题。
直接用 <font></font> 标签会出问题
<font></font> 标签在 HTML5 中已被完全废弃，现代浏览器虽可能渲染，但不保证行为一致，且会被 W3C 验证器报错。Chrome、Firefox、Safari 均已移除对其的规范支持，仅靠它设置颜色、大小或字族属于技术债——看似能用，实则埋雷。
常见错误现象包括：size 属性对响应式布局完全失效；color 在深色模式下无继承逻辑；face 指定的字体无法 fallback 到系统安全字体，导致空白或回退成 Times New Roman。
font-family、font-size、color 必须用 CSS 控制
这三个属性是替代 <font></font> 的核心手段，必须写在 style 属性中或外部 CSS 文件里：
-
font-family要提供逗号分隔的字体列表，末尾必须加通用族（如sans-serif），否则 Windows 和 macOS 渲染差异极大 -
font-size推荐用px（如16px）起步，避免用small/large这类绝对关键词——它们在不同 UA stylesheet 中映射值不统一 -
color优先用十六进制（如#333）或rgb()，别依赖red这类名称——部分屏幕阅读器对命名色支持不稳定
示例（正确写法）：
<p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 16px; color: #222;">正文文本</p>
不要在行内 style 里重复写整套字体逻辑
每次手动写 font-family + font-size + color 容易漏项、难维护。真实项目中应：
- 在
body上统设基础字体栈和默认字号（如font-size: 16px），让所有子元素自然继承 - 用语义化类名封装常用组合，比如
text-body-sm表示小号正文，text-heading-lg表示大标题 - 避免在
font-family中混用中文字体与英文字体名（如"PingFang SC", "Helvetica"是 OK 的；"微软雅黑", Helvetica在某些 Linux 环境下会因编码问题断链）
兼容性陷阱：system-ui 和本地字体名要小心
system-ui 是现代推荐的字体族起始项，但它在旧版 Safari（≤12）和 IE 中不识别，直接跳过；而中文系统字体名（如 "Microsoft YaHei"、"PingFang SC"）大小写敏感，Windows 下 "microsoft yahei" 会失效。
真正稳妥的写法是：
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
注意两点：一是英文名优先于中文名，二是 "Noto Sans CJK SC" 这类开源字体需确认页面已加载对应 @font-face，否则仍会 fallback 到 sans-serif。
