font-size 决定文字基础大小，单位选择直接影响响应性：px 锁定尺寸不利缩放，em 易因嵌套失控，rem 基于根元素更可控，推荐用于移动端；clamp() 实现流体字号但 safari 13.1+ 才完全支持；font-family、line-height、vertical-align 等共同影响实际渲染效果。
font-size 决定文字基础大小，单位选择直接影响响应性
font-size 是控制文字大小最直接的属性，但它不是孤立生效的。使用 px 会锁定绝对尺寸，不利于缩放和无障碍访问；em 相对于父元素字体大小，嵌套深时容易失控；rem 基于根元素（html）字体大小，更可控，适合响应式布局；% 和 em 行为类似，但语义稍弱。
- 在移动端优先项目中，建议用
rem配合 js 或媒体查询动态调整html的font-size - 避免在组件内部多层嵌套使用
em，比如nav > ul > li > a中连续设font-size: 0.8em，最终尺寸难预测 -
font-size: clamp(1rem, 4vw, 1.5rem)可实现流体字号，但需注意 Safari 13.1+ 才完全支持
font-family 影响实际渲染大小，尤其在跨平台时
不同字体的 x-height（小写字母 x 的高度）、ascender/descender 高度差异明显。例如 "Helvetica Neue" 和 "Georgia" 即使设同样 font-size: 16px，视觉大小和行高感受也不同。系统字体栈中混用无衬线与衬线字体时，这种差异会被放大。
- 不要仅凭设计稿中的字号数值直接写死 css，先在目标浏览器中用开发者工具比对真实渲染效果
- 使用
font-feature-settings: "ss01"等特性可微调字形，但兼容性有限（chrome 48+,firefox 34+），慎用于核心文本 - 中文字体如
"PingFang SC"、"Hiragino Sans GB"在 macOS 上渲染更紧凑，windows 下"microsoft YaHei"通常略显“胖”，同一font-size下需预留 2–4px 视觉余量
line-height 和 font-size 共同决定行间松紧，别只调 font-size
line-height 不是“行高”，而是行距的计算基准。当设为无单位数值（如 line-height: 1.5），它会乘以当前 font-size 得到实际行高；若用 px 或 em，则脱离字体上下文，易导致父子元素行高错位。
- 推荐始终使用无单位值：比如
font-size: 1.125rem; line-height: 1.4;，这样缩放或继承时保持比例 -
line-height: normal由字体自身 metrics 决定，不同字体结果差异大，不适合需要精确控制的排版场景 - 设置
line-height小于font-size（如font-size: 16px; line-height: 12px）会导致文字重叠，chrome devtools 会标黄警告line-height值过小
vertical-align 对内联元素文字对齐有隐式影响
vertical-align 默认是 baseline，它让内联元素（包括文字）的基线对齐。但基线位置取决于字体，不是文字框底部。当 img 和文字并排、或 span 内混用不同 font-size 文字时，会出现“文字悬空”或“下沉”现象。
立即学习“前端免费学习笔记（深入）”；
- 不要用
vertical-align: middle强行居中，它基于父元素的 middle 点（即半行高处），而非内容中心，常造成轻微偏移 - 更可靠的方式是统一父容器设
display: flex; align-items: center;，或对文字包裹元素设vertical-align: text-bottom/text-top明确锚点 -
vertical-align对块级元素无效，只作用于inline、inline-block、table-cell等元素
字体大小不是单点调节，而是 font-size、line-height、font-family 和上下文渲染共同作用的结果。很多“字号不准”的问题，其实出在 line-height 没配平，或字体 fallback 切换后 metrics 突变。