basefont 标签在 html5 中已被完全移除，仅 ie9 及更早版本支持，现代浏览器仅作向后兼容解析；其硬编码字体、大小、颜色的行为破坏结构与样式分离原则，无法响应式、不支持 css 变量及暗色模式，必须用 body 上的 css 规则替代。
basefont 标签在 HTML5 中已被完全移除，不是“不推荐”，而是标准里根本不存在——浏览器继续解析它，纯粹是向后兼容的残余行为。
为什么 basefont 在现代项目中必须禁用
它把字体、大小、颜色三个表现层逻辑硬编码进 HTML 结构，直接破坏“结构与样式分离”这一 Web 工程基本契约：
-
basefont的size属性使用 1–7 的抽象编号，和 CSS 的px/em/rem无映射关系，无法参与响应式计算 - 其
face和color属性被所有现代 CSS 选择器优先级规则忽略，!important都覆盖不了 - 只在 IE9 及更早版本中有完整支持；Chrome/Firefox/Safari 均不保证渲染一致性，尤其在启用暗色模式或系统字号缩放时会失效
- 无法被 CSS 变量、
@media查询或自定义属性继承控制，导致多主题、无障碍适配完全失控
body 全局样式设置的正确写法
替代 basefont 的核心动作是：把默认文字样式锚定在 body 上，并确保子元素自然继承
- 用
font-size: 16px而非100%或1em—— 后两者依赖用户代理样式，移动端可能被 Safari 强制放大 - 显式声明
line-height: 1.5，避免不同字体下基线错位 -
font-family必须包含通用字体族（如sans-serif），防止 fallback 失败时回退到不可控系统字体 - 若需全局字号缩放能力，改用
font-size: clamp(1rem, 0.5vw + 1rem, 1.25rem)替代固定值
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
}
容易被忽略的继承陷阱
很多人以为设了 body 就万事大吉，但以下情况会意外中断继承链：
-
input、textarea、button等表单控件默认不继承font-family和font-size，必须显式重置 -
pre、code默认使用等宽字体，若未覆盖，会脱离全局字体设定 - 第三方组件库（如 Ant Design、Element Plus）常带自己的
font-size重置，需检查其 CSS 优先级是否高于你的body规则 - 使用
rem单位时，若根元素html的font-size被 JS 动态修改（如根据屏幕宽度调整），body的font-size必须设为1rem才能联动
真正关键的不是“怎么写 CSS”，而是意识到：一旦用了 basefont，你就放弃了对文字样式的工程化控制权。它不会报错，但会在暗色模式、高对比度、缩放字体、CSS-in-JS 注入、SSR 渲染等真实场景里突然失灵——而那时你已经没法快速定位问题源头了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
