全局字体应设在:root并用*重置，表单控件需单独font:inherit；font-size优先rem且保持html{font-size:100%}；line-height必须用无单位值；中英文混排时中文字体置后并加引号，末尾加sans-serif兜底。
全局字体设置用 body 还是 :root？
直接写在 body 上看似简单，但会漏掉 button、input、textarea 等原生表单控件——它们默认不继承 font-family 和 line-height。更稳妥的做法是把基础排版变量提至 :root，再统一重置关键元素。
- 在
:root里定义--font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;和--line-height-base: 1.5; - 用
* { font-family: var(--font-base); line-height: var(--line-height-base); }覆盖所有元素（注意：这会影响 SVG 内文本，需单独修正） - 对
button、input、select、textarea单独加font: inherit;，避免系统字体干扰
font-size 用 rem 还是 em？
rem 是全局缩放的可靠选择，但前提是别动 html 的 font-size 默认值（16px），否则所有 rem 计算都会偏移。移动端适配时容易误用媒体查询暴力缩放 html，结果导致按钮文字突然变小、行高塌陷。
- 保持
html { font-size: 100%; }（即 16px），这是最稳的基线 - 用
rem设定层级：h1 { font-size: 2rem; }、p { font-size: 1rem; } - 避免在组件内部用
em做基础字号（比如.card { font-size: 0.875em; }），它会叠加父级，调试时极易失控
行高 line-height 设成无单位数值还是带单位？
必须用无单位数值（如 1.5），而不是 1.5em 或 24px。带单位的行高会被子元素继承并计算为固定像素值，一旦子元素字号变化，行高就卡死不动，造成文字挤在一起或留白过大。
- 全局设
line-height: 1.5;（推荐 1.4–1.6 区间，兼顾可读性与紧凑感） - 不要给
h1～h6单独设line-height: 1.2em类似写法——它实际等于1.2 × 当前 font-size，但继承后子元素仍按这个固定倍数算，不是相对自身字号 - 若需标题行高更紧凑，直接写
line-height: 1.2;（无单位），它会自动按该元素自身font-size计算
中英文混排时字体 fallback 怎么写才不崩？
中文优先的项目，font-family 列表里英文部分必须放在中文之后，且要包含常见英文系统字体。否则 macOS 下可能回退到 Helvetica，而 Windows 下用 Arial，渲染效果不一致；更糟的是某些安卓 WebView 会跳过整个列表，直接用默认等宽字体。
- 推荐顺序：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; - 中文字体名必须加引号（
"Microsoft YaHei"），否则空格会被当分隔符 - 末尾再补一个通用族类
sans-serif，兜底防全链路失效
字体和行高的细节藏在每一处继承和回退逻辑里，改一行 font-size 可能牵出三个地方的 line-height 错位，最麻烦的是表单控件和 SVG 文本——它们安静地不跟着你写的 body 规则走。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
