em相对于父元素font-size，嵌套易失控；rem始终相对于根元素font-size，适合全局缩放。响应式优先用rem，局部缩放才用em；避免html设62.5%影响可访问性。
font-size 用 em 和 rem 的区别在哪
em 是相对于父元素 font-size 计算的，嵌套深了容易失控；rem 始终相对于根元素（html）的 font-size，更适合全局缩放控制。
常见错误现象：font-size: 1.2em 在多层 div 嵌套后变成 1.44 倍、1.728 倍……根本没法预测。
- 做响应式文字时优先用
rem，比如font-size: 1.125rem（对应 18px，假设根字号是 16px） - 需要局部缩放（如按钮内文字随按钮大小变化）才考虑
em - 别在
html上直接设font-size: 62.5%来“方便计算”，这会让用户自定义字号失效，影响可访问性
浏览器默认字体大小能被覆盖吗
能，但不是所有地方都可靠。浏览器默认根字号通常是 16px，但用户可能在设置里改成 20px 或开启“大字体模式”。硬写 font-size: 16px 会覆盖用户偏好，属于反模式。
使用场景：只有明确要求像素级精确对齐（如图标内文字、设计稿强约束）时才用 px；其他情况推荐相对单位。
-
px在打印样式表里反而更稳，因为不随屏幕缩放抖动 -
%和em行为一致，但可读性差，现在基本被rem取代 - 移动端慎用
small、large这类关键字，各浏览器渲染差异明显
line-height 设太小会导致文字被截断
很多人只调 font-size，忘了 line-height。设成 line-height: 1 看似紧凑，但英文小写字母 g、y 或中文标点「。」可能被裁掉。
错误现象：文字底部发虚、标点消失、光标位置异常——往往不是字体问题，是行高不够。
- 正文推荐
line-height: 1.4 ~ 1.6，兼顾可读性和兼容性 - 用无单位数值（如
1.5）而不是1.5em，避免继承时二次计算 - 如果父容器有
height且小于内容自然高度，line-height再大也救不了截断
font-size-adjust 能解决字体替换后的大小突变吗
能，但支持度有限。当首选字体不可用、回退到备用字体（比如从 “Inter” 回退到 “Segoe UI”），字形 x-height 差异大会导致视觉尺寸跳变。font-size-adjust 就是为此设计的。
目前仅 Firefox 和 Safari 支持，Chrome/Edge 还没跟上，所以不能单独依赖它来保底。
- 写法是
font-size-adjust: 0.5;，数值代表目标字体 x-height / font-size 的比值 - 可以用
font-synthesis: none;配合禁用浏览器自动加粗，避免某些字体回退后突然变粗再变大 - 真要兼容所有浏览器，还是得靠多字体声明 + 合理的
font-size范围控制，比如用clamp(1rem, 4vw, 1.25rem)
最麻烦的其实是中英混排时的字号一致性——同一个 font-size 下，中文往往视觉上比英文“大一圈”，这不是 bug，是字体设计使然。调 font-size-adjust 或改字体族前，先确认你面对的是真实尺寸问题，还是单纯错觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
