统一字体的关键是在body或:root全局设置font-family字体栈，如body{font-family:-apple-system,"Segoe UI",sans-serif;}，并显式为input等元素设inherit，避免!important破坏继承。
字体不统一，核心是没在全局设置好 font-family。只要在 CSS 最开始定义一次基础字体栈，后续大部分元素就能自动继承，不用每个地方都写。
全局设置 font-family（最关键一步）
在样式表最顶部（或 :root、body 上）统一声明字体族，让所有文字有“默认出身”：
- 推荐写在
body上，简洁直接：
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } - 这个字体栈兼顾了 macOS、Windows、Android 和通用 fallback，中文显示也较稳
- 避免只写一个字体名（如
font-family: "Microsoft YaHei"），万一系统没有就会回退到浏览器默认（常是 Times New Roman），造成不一致
覆盖特殊字体需求时保持可控
标题、按钮等需要强调的元素可单独设字体，但要延续主字体逻辑：
- 比如想让标题更醒目，可以加粗 + 同一族无衬线体：
h1, h2 { font-family: inherit; font-weight: 700; } - 如果真要用中文字体（如思源黑体），也建议加在通用栈后面，并保留
sans-serif收尾：
body { font-family: "Source Han Sans SC", -apple-system, "Segoe UI", sans-serif; } - 慎用
!important强行改字体——它容易掩盖继承关系，反而让问题更难排查
检查常见“漏网之鱼”
有些元素默认不继承 font-family，或被框架/重置样式干扰：
立即学习“前端免费学习笔记（深入）”；
-
input、textarea、button默认有系统字体，需显式设置：
input, textarea, button { font-family: inherit; } - 用了 CSS Reset（如 normalize.css）后，确认它没把
font-family设成空或重置为 serif - 检查浏览器开发者工具里具体元素的“Computed”面板，看
font-family最终解析成什么，快速定位哪一层覆盖了全局设置
小技巧：用自定义属性简化维护
如果项目可能换字体，用 CSS 变量提前留好扩展口：
- 在
:root定义：
:root { --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } - 然后
body { font-family: var(--font-base); }，以后只需改一处变量值 - 变量名清晰（如
--font-heading）还能区分标题和正文字体，逻辑更干净
