HTML全局字体设置方法

直接往 中写入 body { font-family: ...; font-size: ...; }，这确实是设置页面字体的常见做法，效果也能覆盖大部分文字内容。然而，这里有一个容易被忽略的关键细节——务必添加通用字体族作为兜底。否则，macOS 或 Linux 下的中文内容大概率会回退到系统默认的宋体，视觉呈现效果往往不尽如人意。

不仅如此，button、input 等表单元素的字体设置，比想象中更加顽固。这些元素各自带有 UA 默认样式，例如 font-family: -webkit-system-font 等。你在 body 上定义的属性，很可能无法作用于它们。因此，真正可靠的 CSS 字体设置方案是：一次性将 body, button, input, select, textarea, th, td 等关键元素统一声明，确保全局字体样式的一致性。

此外，还有两个细节值得留意：中文字体名称必须使用引号包裹，例如 "Microsoft YaHei"，否则遇到空格时会导致解析失败；字体栈末尾必须添加通用族名，如 sans-serif，否则 iOS Safari 可能在字库中找不到对应字体，最终显示为 Times New Roman，影响整体排版效果。

为何仅设置 body font-family 无法覆盖所有元素

简单的 CSS 继承机制在这里并不适用。浏览器不会自动将 h1、button、input 等元素的字体从 body 继承，除非这些元素本身没有任何字体定义。但问题在于，许多内置元素（如 button）拥有 UA 样式，强制设定了 font-family，其优先级高于 body 的声明，从而导致你的设置被覆盖。

• 有效的做法是：对 body, button, input, select, textarea, th, td 等关键元素进行统一的显式 font-family 声明
• 中文字体名称必须加引号包裹，例如 "Microsoft YaHei"，否则含有空格时解析会失败
• 字体栈末尾必须包含通用族名，如 sans-serif，否则 iOS Safari 默认可能渲染为 Times New Roman

跨平台字体栈 font-family 的编写规范

仅写 "Microsoft YaHei", "Helvetica Neue" 这种组合，在不同操作系统下会出现显示不一致的问题：macOS 上没有安装微软雅黑时，会跳转到 Helvetica Neue，但中文内容会回退到系统默认的宋体，造成同一行文字出现两种字体风格，影响阅读体验。

• 推荐使用系统字体栈：-apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif
• 顺序安排有讲究：iOS/macOS 优先使用 -apple-system，Windows 使用 "Segoe UI"，国产系统字体放在后面兜底
• 避免混用中英文专有字体（如 "Noto Sans SC", Arial），Noto Sans SC 在 Windows 默认未预装，Arial 不支持中文，组合使用容易导致显示异常

全局字号选择：px 与 rem 的无障碍对比

如果项目不需要考虑用户缩放或无障碍需求，px 是最直接且稳定的方案。但一旦用户在系统设置中调大了“显示大小”或启用了“粗体文本”，px 无法响应变化，而 rem 可以自动适配。这是 WCAG 1.4.4 无障碍标准的要求，不仅仅是技术选型问题。

• 使用 rem 时，必须先重置 html 根元素的字号，例如 html { font-size: 16px; }，否则各浏览器默认值不一致（Chrome 为 16px，Firefox 可能为 17px）
• 在 body 中设置 font-size: 1rem 后，还需同步修改 button、input 等元素的字号，否则它们会按 UA 默认字号渲染，导致视觉效果不统一
• px 虽然使用简单，但在 iOS“更大字体”辅助功能下完全无法放大，这直接影响了无障碍体验

最后，还有一个容易被忽视的问题：CSS 优先级。你写了 body { font-family: ... }，但如果某个组件库的 CSS 文件在后面加载，并且使用了 !important 或更具体的选择器（如 div p），你的全局设置就会被覆盖。排查方法很简单：打开 DevTools，选中任意段落文字，查看 Styles 面板中 font-family 哪条声明被划掉——被划掉的就是被覆盖的规则。这是日常 CSS 调试中的常见经验，并非高深理论。