全局字体必须设在 :root 或 html 上，:root 更推荐且支持 css 变量；表单控件需显式设置 font: inherit；字体顺序要确保中文字体优先；移动端 rem 适配需 js 动态计算 html font-size 并监听屏幕变化；line-height 必须用无单位值。
全局字体必须设在 :root 或 html 上，body 无效
button、input、textarea 等原生表单控件默认不继承 body 的 font-family，写在 body 上等于没设。真正生效的起点只有两个：:root 或 html。
-
:root { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }是更推荐的方式，语义清晰且支持 CSS 变量复用 -
html { font-family: ...; }效果等价，但无法定义--font-base这类变量 - 别漏掉
input, textarea, select, button { font: inherit; }—— 这是兜底动作，防止某些浏览器忽略继承
font-family 字体顺序错一位，中文就 fallback 到 Helvetica
浏览器按顺序逐个尝试字体，遇到第一个存在且能渲染中文的才停。把 sans-serif 放最前，或把英文系统字体（如 Helvetica）放中文字体前面，iOS 和部分安卓 WebView 就会跳过中文字体，直接用无中文字符的 fallback。
- 正确顺序：
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif - 含空格或特殊字符的字体名必须加引号，比如
"PingFang SC"；通用字体名如sans-serif不加引号 - 避免写成
font-family: sans-serif, "Microsoft YaHei";—— 这会让所有中文文本走系统默认无衬线字体
移动端 rem 适配下，html { font-size } 必须动态设置，不能只靠 CSS
单纯用媒体查询写一堆 @media (min-width: 414px) { html { font-size: 26px; } } 会卡在断点之间，比如 iPhone 14 Pro Max（430px）和 iPad mini（744px）之间没有覆盖，字体大小突变。真要平滑适配，得靠 JS 动态算。
- 基础公式：
document.documentElement.style.fontSize = (window.innerWidth / 375) * 16 + 'px';（假设设计稿宽 375px） - 必须监听
resize和orientationchange，否则横竖屏切换时innerWidth变了但字体没重算 - 别在
DOMContentLoaded里只执行一次 —— 用户旋转手机后不会触发该事件 - 加一行
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }，防 Safari 自动放大文本
line-height 必须用无单位值，1.5 不等于 1.5em
带单位的 line-height（如 1.5em 或 24px）会被子元素继承为固定像素值，一旦子元素字号变了，行高就卡死不动，导致文字挤在一起或留白爆炸。
- 全局统一写：
:root { --line-height-base: 1.5; }，然后* { line-height: var(--line-height-base); } - 标题等需要紧凑行高的场景，也写
line-height: 1.2;（无单位），它会自动按当前元素自己的font-size计算 - 千万别给
h1单独设line-height: 1.2em—— 它实际等于1.2 × 父级 font-size，不是自身字号的 1.2 倍
根字号动态计算和字体继承链是连动的，改了 html { font-size } 但漏掉表单控件的 font: inherit，或者行高用了带单位值，都会让整套适配在某个环节突然失效。这些点不在同一层，但缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
