怎么设置全局字体

直接在<style>中给body设font-family和font-size可覆盖多数文本，但必须加通用字体族兜底（如sans-serif），否则中文在macOS/Linux会fallback至难看宋体；且需显式声明button、input等元素字体，因其UA样式会覆盖body设置。

直接在 <style> 里给 body 设 font-family 和 font-size，就能覆盖绝大多数文本元素——但必须加通用字体族兜底，否则中文在 macOS 或 Linux 上大概率 fallback 到难看的默认宋体。

为什么只写 body { font-family: "Microsoft YaHei"; } 不行

浏览器不会自动把 h1、button、input 的字体继承自 body，除非它们本身没定义字体。很多内置元素（比如 button）有 UA 样式强制设了 font-family: -webkit-system-font 或类似值，会覆盖 body 设置。

• 真正生效的是给 body, button, input, select, textarea, th, td 等显式统一声明
• 中文字体名必须用引号包裹，例如 "Microsoft YaHei"，否则含空格时解析失败
• 末尾必须带通用族名，如 sans-serif，否则 iOS Safari 可能渲染为 Times New Roman

font-family 字体栈怎么写才跨平台一致

单纯列 "Microsoft YaHei", "Helvetica Neue" 会导致中西文分裂：macOS 没微软雅黑，直接跳到 Helvetica Neue（西文），中文却 fallback 到系统默认宋体——结果一行字两种风格。

• 推荐用系统字体栈：-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 最稳；但只要用户在系统设置里调大了“显示大小”或启用了“粗体文本”，rem 才能响应变化。

立即学习“前端免费学习笔记（深入）”；

• 用 rem 时，必须先重置 html 根元素字号，例如 html { font-size: 16px; }，否则各浏览器默认值不一（Chrome 是 16px，Firefox 可能是 17px）
• 别在 body 里写 font-size: 1rem 就完事——要同步改 button、input 等，否则它们仍按 UA 默认字号渲染
• px 虽然简单，但在 iOS「更大字体」辅助功能下完全不放大，可能违反 WCAG 1.4.4

最常被忽略的一点：CSS 优先级。哪怕你写了 body { font-family: ... }，只要某个组件库的 CSS 文件在后面加载，且用了 !important 或更具体的选择器（比如 div p），你的全局设置就失效了。检查方式很简单：打开 DevTools，选中任意段落文字，在 Styles 面板里看 font-family 哪条声明被划掉——被划掉的就是被覆盖的。