字体和行距需分层 fallback、用无单位 line-height、段落间距用 margin-bottom、font-feature-settings 要先验证支持。中文字体优先 system-ui 等跨平台栈，禁用 simsun 前置，慎用 normal 和混用引号。
font-family 设置要分层 fallback，别只写“微软雅黑”
Windows 和 macOS 渲染中文字体的默认行为差异大，单写 "Microsoft YaHei" 在 Mac 上会回退到不一致的系统字体，甚至触发 Times New Roman 这种灾难性 fallback。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 中文优先用
system-ui+-apple-system+BlinkMacSystemFont+"Segoe UI"+"Microsoft YaHei"+ui-sans-serif这套组合，让各平台走各自最优字体栈 - 避免在
font-family里混用引号类型（比如'PingFang SC', "Helvetica"），统一用双引号更稳妥 - 不要把
SimSun放在靠前位置——它像素感重、字重僵硬，现代排版中仅作最后兜底
line-height 别设成无单位数字以外的值
设 line-height: 24px 或 line-height: 1.5em 看似直观，但会导致子元素继承时计算混乱。比如字号放大后，固定像素值不会缩放，em 值又会层层叠加。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 一律用无单位数值（如
line-height: 1.6），它基于当前元素的font-size计算，可继承、可缩放、无歧义 - 正文段落推荐
1.5–1.7，小字号标题可略低（1.3–1.4），大标题可更高（1.8）以留白呼吸感 - 慎用
normal——浏览器渲染差异大，Chrome 和 Safari 对同一字体可能给出不同行高
段落间距用 margin-top 还是 margin-bottom？
用 margin-top 给 p 加间距，遇到浮动、flex 或 grid 容器时容易塌陷或错位；而 margin-bottom 更符合文档流自然延展逻辑，也方便后续加 :last-child 清除末尾多余空白。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用
margin-bottom控制段落间距，例如p { margin-bottom: 1.2em; } - 配合
p:last-child { margin-bottom: 0; }避免容器底部多出一截空白 - 如果内容来自 CMS，且段落间可能夹杂
blockquote或figure，建议改用margin-block-end（现代浏览器支持良好），它比margin-bottom更语义化，且不受书写模式影响
font-feature-settings 开启连字和旧式数字前先确认字体支持
不是所有中文字体支持 font-feature-settings，盲目开启 "liga" 或 "onum" 可能完全无效，甚至在某些字体中引发字符错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先查字体文档或用浏览器 DevTools 的 Fonts 面板确认是否暴露对应 OpenType 特性
- 中文字体极少支持
"liga"（连字），但部分思源黑体变体、霞鹜文楷等开源字体支持"ss01"、"ss02"等样式集，可针对性启用 - 若需旧式数字（lowercase numbers），优先考虑用
font-variant-numeric: oldstyle-nums;，比手动写font-feature-settings: "onum"更可靠、更易维护
字体和行距看着简单，但跨平台渲染、继承链、字体特性支持这几块最容易在上线后才暴露问题。尤其当设计稿用的是 macOS 字体预览，而用户大量在 Windows 浏览时，font-family fallback 顺序和 line-height 单位选错，三分钟就能让整篇阅读体验掉档。
