文字重叠主因是line-height未随视口缩放自适应，应优先使用无单位数值（如1.4），避免固定像素值；需结合font-size响应式调整、检查flex/grid容器高度约束，并考虑字体加载导致的度量变化。
文字重叠是因为行高没随视口缩放
响应式页面里文字挤在一起，不是字体太小，而是 line-height 没跟着变。固定值比如 line-height: 1.2 在小屏上会显得行距过紧，尤其搭配大字号或加粗文本时，上下行字形实际渲染区域就撞上了。
根本原因是：行高是相对于当前 font-size 计算的，但如果你用的是绝对单位（如 line-height: 20px）或未配合字体缩放一起调整，它就不会随屏幕变化而自适应。
- 优先用无单位数值（如
line-height: 1.4），它始终基于当前字号计算，天然适配缩放 - 避免
line-height: 20px这类固定像素值——它在手机上不会变小，反而更易重叠 - 如果必须控制精确垂直节奏（比如和设计稿对齐），改用
clamp()配合视口单位：line-height: clamp(1.2, 4vw, 1.6)
媒体查询里改行高要同步考虑字体大小
只在 @media 里调 line-height 很容易失效，因为多数人同时也在调 font-size，而行高若写死，就会和新字号不匹配。
典型错误写法：@media (max-width: 768px) { p { font-size: 14px; line-height: 1.2; } } —— 看似合理，但 14px × 1.2 = 16.8px 行高，可能比字体本身高度还小，尤其用了 font-weight: bold 后字形下沉更多，立刻重叠。
- 检查实际渲染：用浏览器开发者工具选中文字，看 computed 栏里的
line-height像素值是否明显小于字体高度 - 推荐写法：把行高和字号绑定，例如
font-size: clamp(16px, 4vw, 24px); line-height: 1.4; - 若需精细控制，媒体查询内统一用相对值：
@media (max-width: 480px) { body { font-size: 14px; line-height: 1.5; } }
flex 或 grid 容器里文字重叠的隐藏原因
用 display: flex 或 display: grid 布局时，即使设置了合理行高，文字仍可能视觉重叠——这不是行高问题，而是容器的 align-items 或 justify-content 把文本“压扁”了。
常见现象：多行文字在 flex 容器中被截断、上下行贴得太近，甚至部分字符被裁掉。打开 devtools 会发现元素高度远小于预期，line-height 显示正常，但容器本身没给足空间。
- 检查父容器是否设置了
height或max-height，尤其带overflow: hidden的卡片类组件 - flex 容器默认
align-items: stretch，但子元素若设了align-self: flex-start又没撑开高度，行高就失去作用空间 - 解决办法：给文字容器加
min-height: min-content或显式设置height: auto，确保它能按内容自然伸展
字体加载期间行高跳动导致临时重叠
Web 字体（如 @font-face 引入的思源黑体、Inter）加载前用系统字体渲染，加载后替换，两次渲染的字形度量（ascent/descent/line-gap）不同，line-height 计算基准变了，就会出现文字突然“上浮”或“下坠”，造成瞬时重叠。
这种重叠只在首屏加载时闪现，devtools 里很难复现，但用户感知强烈，尤其新闻列表、卡片标题等密集文本区域。
- 用
font-display: optional或swap控制加载行为，但不能根治度量差异 - 更稳妥的做法：在
@font-face中声明font-metrics-overrides（仅 Chrome 122+ 支持），或用size-adjust补偿（兼容性差） - 实用兜底：给文字容器加
padding-top和padding-bottom，预留一点缓冲空间，比硬调line-height更稳定
行高不是孤立参数，它和字体度量、容器约束、加载时机都咬合在一起。调一个值之前，先看它在什么上下文中生效——有时候问题不在行高本身，而在它没拿到足够的“呼吸空间”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
