basefont 和 font 标签在 html5 中已被移除，仅靠浏览器向后兼容渲染，但在暗色模式、缩放、css-in-js 等场景下会静默失效；应改用 body 设置全局字体并显式继承至表单和等宽元素。
basefont 和 font 标签在现代项目中必须删除——不是“能用但不好”，而是 HTML5 标准里根本不存在，浏览器渲染纯属向后兼容，且在暗色模式、缩放、CSS-in-JS 注入等真实场景下会静默失效。
为什么直接删掉basefont不会报错但很危险
它不触发控制台错误，却会破坏样式继承链：
-
basefont的size属性用 1–7 编号，和px/em/rem无映射关系，无法参与媒体查询或视口计算 -
face和color属性被所有 CSS 选择器无视，连!important都覆盖不了 - Chrome/Firefox/Safari 对它的解析不一致，尤其当页面启用系统字体缩放或暗色模式时，文字可能突然变小、变黑或失色
- 第三方组件库（如 Ant Design）的 CSS 重置规则会与它冲突，但你很难定位问题源头
用body设置全局字号和字体的实操要点
替代 basefont 的核心动作是把默认样式锚定在 body 上，并确保子元素自然继承：
- 写法必须是
body { font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; color: #333; } - 不要设
html { font-size: 10px; }来“缩放全局”，除非你明确需要 rem 基准重设——这会导致em计算错乱 - 表单控件（
input、textarea、button）默认不继承font-family和font-size，需额外加input, textarea, button { font: inherit; } -
pre和code默认用等宽字体，若要统一，显式覆盖为pre, code { font-family: inherit; }
font标签的逐个替换策略
font 标签没有全局作用，通常散落在段落或标题里，替换时不能只靠搜索替换，得按语义分类处理：
- 纯样式改动（如
<font color="red">错误提示</font>）→ 改用类名：<span class="error-text">错误提示</span>，再配 CSS.error-text { color: #d32f2f; } - 局部字号调整（如
<font size="4">副标题</font>）→ 改用语义化标签：<h2 class="subtitle">副标题</h2>，CSS 中用h2.subtitle { font-size: 1.25rem; } - 混合样式（
<font face="Arial" color="#666">说明文字</font>）→ 提取共性，归入统一文本样式类，避免重复声明 - 注意：已有内联
style的元素（如<p style="color:red"></p>）优先级高于body规则，必须手动清理或用更具体的选择器覆盖
真正难的不是写对那几行 CSS，而是识别哪些地方曾依赖 basefont 或 font 实现“视觉一致性”——它们往往藏在旧模板、CMS 输出、第三方插件生成的 HTML 里，不跑一遍真实设备+系统设置组合（比如 iOS 缩放 150% + 暗色模式），根本暴露不出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
