HTML5中<font>标签已彻底失效，必须替换为CSS；color直接映射，size转为rem或px，face转为带引号的font-family并加通用字体族；慎用font简写，优先分写属性；需配合系统字体栈和rem响应式方案。
font标签在HTML5中已完全失效
浏览器（Chrome、Firefox、Safari）对<font>标签的处理是直接忽略其样式属性，只保留文本内容。哪怕写成<font face="SimSun" size="4" color="red">文字</font>，也不会改变字体、大小或颜色——它不是“不推荐”，而是“根本不工作”。
旧项目里残留的<font>标签必须被替换，不能靠CSS覆盖“修复”，因为<font>本身不生成任何可样式化的语义节点，只是被解析为普通文本容器。
如何批量替换color/size/face属性
迁移不是逐行手改，而是按属性映射到对应CSS规则：
-
color→color属性，值保持不变（如#f00、red、rgb(255,0,0)） -
size值为数字1–7 → 需转为像素或相对单位：1≈10px、3≈16px、4≈18px、7≈24px；更稳妥做法是统一用font-size: 1rem配合根元素调整 -
face→font-family，中文名必须加英文引号，且末尾必须接通用字体族，例如："Microsoft YaHei", "PingFang SC", sans-serif
注意：size="3"在不同浏览器渲染差异大，不要试图“还原”旧效果，应以当前设计系统为准重新定义字号层级。
立即学习“前端免费学习笔记（深入）”；
避免font简写属性踩坑
font简写看似方便，但极易出错：
- 必须同时指定
font-size和font-family，缺一不可，否则整条声明无效 - 顺序不能错：正确是
font: italic bold 16px/1.4 "Helvetica Neue", sans-serif；把line-height写在font-size前面会失败 -
font-weight数值（如600）和关键字（如bold）混用时，浏览器可能回退到默认值 - 中文字体名含空格或中文字符（如
"Source Han Sans CN"）必须用引号包裹，否则解析中断
建议初学者先用分开属性写法，确认效果后再合并；生产环境慎用font简写，尤其当涉及多语言或动态字体加载时。
响应式字体与系统字体栈要一起配
单纯替换<font>标签后，如果还用固定px值，会在高DPI屏或缩放场景下显得过小或模糊。真实项目中应同步落地两件事：
- 在
<html>上设基准font-size，例如html { font-size: 16px; }，再用rem控制各级文字 - 采用系统字体栈（system font stack），如
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif，兼顾性能、可读性与跨平台一致性 - 避免依赖
@font-face加载中文字体做全局替换——首屏渲染阻塞、FOIT问题明显，除非业务强依赖品牌字体
真正难的不是把color="blue"改成color: blue，而是让所有文字在iPhone、Windows Chrome、macOS Safari上都看起来“刚刚好”。这需要测试设备组合，而不是只看开发机效果。
