17370845950

统一字体的关键是在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）还能区分标题和正文字体，逻辑更干净