标签在html5中已被移除，其渲染依赖浏览器向后兼容，存在解析不一致、暗色模式失效、css-in-js忽略等问题；迁移需按语义重建css规则，显式处理表单/等宽元素继承，并同步清理js中对的引用。
font标签为什么不能“看起来还能用”就留着
它不是兼容性问题，而是标准级失效：<font></font> 在 HTML5 中根本不存在，浏览器渲染纯属向后兼容行为。Chrome、Firefox、Safari 对 <font color="red" size="4"></font> 的解析结果不一致；暗色模式下文字可能突变为黑色且不可读；CSS-in-JS 注入后，<font></font> 内联样式直接被忽略——你改了 CSS 却发现没生效，根源就在这里。
color/size/face 三个属性怎么一一映射到 CSS
迁移不是字符串替换，而是按语义重建规则：
-
color属性值（如#f00、red）可直接复用，写进colorCSS 属性里 -
size="3"这类数字没有标准换算，别硬套16px；推荐统一设body { font-size: 1rem; }，再用font-size: 1.25rem或1.5em控制相对缩放 -
face="SimSun"必须加英文引号，且末尾接通用字体族：font-family: "SimSun", "Microsoft YaHei", sans-serif;；否则 macOS 和 Linux 可能 fallback 到等宽字体
表单和等宽元素为什么总漏掉继承
<input>、<textarea></textarea>、<button></button> 默认不继承 body 的 font-family 和 font-size，哪怕你写了全局样式也无效：
- 必须显式声明：
input, textarea, button { font: inherit; } -
<pre class="brush:php;toolbar:false;"></pre>和<code>默认用等宽字体，若要统一风格，得覆盖：pre, code { font-family: inherit; } - 已有
style="color:red"的内联样式优先级高于 CSS 规则，得手动清理或用更具体选择器（如p.error-text[style]）覆盖
JS 脚本还在调用 document.getElementsByTagName('font') 怎么办
这是静默断裂点：标签删了，但 JS 还在找 <font></font>，结果返回空数组，后续逻辑直接跳过。必须同步处理：
- 全局搜索
getElementsByTagName('font')、querySelectorAll('font')、正则匹配/<font>]*>/gi</font> - 把依赖
<font></font>的 DOM 操作，改为基于 class 或 data 属性的查找，例如：document.querySelectorAll('.highlight-text') - 若旧逻辑靠
<font></font>标记状态（如错误提示），改用<span class="error-text"></span>+ CSS 控制视觉，JS 改查 class
真正难的不是写对那几行 CSS，而是识别哪些地方曾靠 <font></font> 维持“视觉一致性”——它们往往藏在模板片段、CMS 输出或第三方组件的 innerHTML 拼接里，不跑一遍真实页面很难清干净。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
