直接设 font-size 在 bootstrap 里失效，因为 bootstrap 5+ 使用 clamp() 动态设置 html font-size，导致固定像素值被覆盖；需用 clamp(1rem, 4vmin, 1.25rem) 配合无单位 line-height（如 1.6）同步响应视口，避免行高脱钩与阅读节奏崩坏。
为什么直接设 font-size 在 Bootstrap 里会失效
因为 Bootstrap 5+ 默认启用了 rem 基准 + html { font-size: clamp(...) } 动态缩放，你写的 font-size: 16px 会被根元素动态值覆盖，实际渲染字号可能偏小或忽大忽小。尤其在 iPad 竖屏、折叠屏等中间尺寸上，clamp(1rem, 1.5vw, 1.25rem) 容易导致行高比例崩坏——文字挤在一起或行距过大。
用 font-size + line-height 组合控制可读性比
核心不是“固定字号”，而是让 font-size 和 line-height 同步响应，保持视觉节奏稳定。Bootstrap 的 fs-* / lh-* 工具类默认是静态的（比如 fs-5 固定为 0.875rem），不适合跨屏一致阅读体验。
- 改用
font-size: clamp(1rem, 4vmin, 1.25rem)——vmin比vw更稳，避免横竖屏切换时突变 -
line-height必须用无单位数值（如1.5），不能写1.5rem或24px，否则会和字号脱钩 - 在
.text-body或自定义类中统一设置，别依赖多层fs-*+lh-*叠加，容易冲突
避开 text-{size} 工具类的陷阱
Bootstrap 的 text-sm、text-lg 等类本质是预设 font-size 值，不带响应式行高联动。你在 md 屏下用 text-lg，到了 xl 屏它还是同样字号，但视口变宽后，相同字号+固定行高反而显得稀疏、断句难读。
- 禁用
text-*类做主体文本排版，仅用于图标旁标注、表头等次要文案 - 主内容区用自定义类，例如：
.text-readable {<br> font-size: clamp(1rem, 4vmin, 1.25rem);<br> line-height: 1.6;<br>} - 若需适配深色模式，加
@media (prefers-color-scheme: dark)微调line-height（暗色背景下人眼感知行距略小，可设为1.65）
移动端 Safari 的 text-size-adjust 干扰
iOS Safari 会强制放大小字号文本（尤其 <p></p> 内小于 16px 的文字），破坏你设定的 clamp 比例。这不是 Bug，是可访问性策略，但会让行高突然撑开、段落错位。
- 加
text-size-adjust: none仅对已明确可读性的容器启用（如正文段落），别全局设 - 必须配合
-webkit-text-size-adjust: none（旧 Safari 兼容） - 注意：禁用后，系统「更大字体」辅助功能会失效，所以只在品牌文案、说明文等非长文场景用；用户生成内容（如评论）保留默认行为
真正卡住可读性一致性的，从来不是字号本身，而是 font-size 和 line-height 在不同视口下的耦合关系是否被显式声明——Bootstrap 的工具类没管这事，得自己补上那条 clamp() 和那个无单位 line-height。
