font-family是可继承属性，父元素设置后子元素自动继承其计算值；若子元素声明无效字体则中断继承链，回退至浏览器默认字体，因此需在body等高层容器统一设置以保障样式一致性。
因为 font-family 是可继承属性，且几乎所有文本类元素（p、span、li、button 等）都依赖它来渲染文字——如果布局容器（如 div、section、article）没设 font-family，子元素就只能回退到浏览器默认字体（通常是 Times New Roman 或系统 serif），样式一致性立刻崩坏。
font-family 继承不是“可选”，而是默认行为
只要父元素设置了 font-family，所有后代文本元素都会自动继承，无需额外声明。这不是靠 JS 或框架注入，是浏览器原生机制。
- 继承发生在计算阶段：浏览器先查子元素自身是否声明了
font-family；没有，则沿 DOM 树向上找，直到html根元素 - 继承的是「计算值」，不是声明值：比如父元素写
font-family: "PingFang SC", system-ui;，子元素继承的是浏览器最终解析出的可用字体名（如"PingFang SC"或 fallback 的system-ui） - 一旦子元素自己写了无效字体（如
font-family: unknow;），该声明会生效（但因无效，降级为浏览器默认），**中断继承链**
布局容器上设 font-family 的真实作用场景
你很少直接给 div 写文字内容，但它常作为卡片、弹窗、表单区域等容器——这些容器内部嵌套的标题、段落、按钮、输入框，全靠它兜底。
- 多语言站点：在
html或body上统一设font-family: "Noto Sans CJK SC", sans-serif;，避免中英文混排时部分文字用宋体、部分用 Helvetica - 设计系统隔离：给
.modal容器设font-family: ui-sans-serif;，确保模态框内所有文本（包括第三方组件里的span）都走同一套字体栈 - 微前端场景：主应用设
body { font-family: var(--font-base); }，子应用不覆盖时自动继承，避免各模块字体打架
容易被忽略的继承陷阱
font-family 继承看着简单，但实际出问题往往是因为「以为设了，其实没生效」或「设了却被意外覆盖」。
- 选择器权重不足：比如全局写了
body { font-family: sans-serif; }，但某个组件里div p { font-family: monospace; }优先级更高，导致段落字体被强制改掉 - 使用了
font缩写却漏掉font-family：如font: 16px bold;会把font-family重置为初始值（通常为serif），子元素继承的就是这个被重置后的值 - 自定义属性未正确传递：用
font-family: var(--text-font, sans-serif);时，若父容器没定义--text-font，子元素继承的是sans-serif，而非你想控制的字体栈
真正关键的不是「要不要继承」，而是「谁来当那个可靠的父级」——它得足够高（如 body），足够稳（不被局部规则轻易覆盖），还得能兜住所有可能冒出的文本节点。否则，一个没声明 font-family 的 div，就是字体混乱的起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
