全局字体必须用CSS设置，body需联合button、input等元素统一声明font-family，并按平台分层兜底中文字体，末尾加sans-serif，line-height和font-size须显式设定，优先级需检查覆盖情况。
全局字体设置必须写在 CSS 里，不能靠 font 或 basefont
浏览器早就无视 <font> 和 <basefont> 标签了——不是报错，是直接跳过，连控制台提示都没有。你写了 <font face="PingFang SC" color="#333">，页面照样用 UA 默认字体渲染，毫无反应。所有现代项目都必须用 CSS 控制字体，这是硬性前提。
body 上设 font-family 不够，还得覆盖 button、input 等元素
只写 body { font-family: "Segoe UI", sans-serif; }，看起来大部分文字变了，但点开一个 <button> 或输入框，字体很可能还是系统默认的（比如 macOS 的 -apple-system，或 Windows 的 Segoe UI 但中文 fallback 失败）。原因在于这些元素有 UA 样式强制声明，会覆盖 body 继承。
实际要这样写：
body,
button, input, select, textarea,
th, td {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
}
- 中文字体名必须用英文引号包裹，例如
"PingFang SC"，否则含空格时解析失败 - 末尾必须带通用族名
sans-serif，否则 iOS Safari 可能回退到Times New Roman -
line-height必须显式设，否则button等元素行高不可控，容易出现文字贴边或上下偏移
字体栈顺序决定跨平台一致性，别混搭中英专有字体
常见错误是把 "Noto Sans SC" 和 Arial 写一起：前者 Windows 默认不预装，后者不支持中文，结果 macOS 上西文用 Arial，中文 fallback 到难看宋体，一行字两种风格。
立即学习“前端免费学习笔记（深入）”；
正确做法是按平台分层兜底：
- 优先用系统级字体：如
-apple-system（macOS/iOS）、BlinkMacSystemFont（Chrome on macOS） - 再列各平台主流中文字体：
"PingFang SC"、"Hiragino Sans GB"、"Microsoft YaHei" - 最后补通用族：
sans-serif，不写serif或留空
别指望靠 @font-face 加载中文字体做全局替换——首屏阻塞、FOIT 明显，除非品牌强依赖且已做子集化和 font-display: swap 优化。
font-size 用 px 还是 rem？得看是否响应系统缩放
如果项目要适配系统级“更大字体”或无障碍设置（如 iOS「更大字体」、Windows「显示缩放」），rem 是唯一可靠选择；否则 px 更稳、更可预期。
用 rem 时注意两点：
- 必须先重置
html根元素字号，例如html { font-size: 100%; }或明确写html { font-size: 16px; }，否则 Chrome/Firefox 默认值不一致 -
button、input等元素也要同步设font-size: 1rem，它们不会自动继承body的rem值
最容易被忽略的是 CSS 优先级：哪怕你写了 body { font-family: ... }，只要某个组件库的样式表在后面加载，且用了更具体的选择器（比如 div p）或 !important，你的设置就会被划掉。打开 DevTools，选中任意段落，在 Styles 面板里看哪条 font-family 被划掉，就知道谁赢了。
