clamp()配合line-height才是完整方案，因仅调字号不调行高会导致大屏行距压缩、小屏文字贴边；须同步用无单位line-height（如1.4）或clamp(1.1, 1.25, 1.3)实现弹性适配。
直接改 --bs-font-size-base 或加一堆 @media 不足以保证可读性——真正影响阅读体验的，是字号、对比度、行高、字重和系统环境的组合响应，不是单点调整。
为什么 clamp() 配合 line-height 才算完整方案
只用 font-size: clamp(1.25rem, 4vw, 2rem) 会让大屏下文字变大但行高没跟上，导致行距压缩、视觉拥挤；小屏下若 line-height 还是固定值（比如 1.2），文字又容易贴边、难扫读。
- 必须同步设置
line-height：推荐用无单位数值（如1.4），它会随字号等比缩放 - 避免写
line-height: 2rem这类绝对值，否则在小屏下撑开过大空白 - 标题类可微调：例如
h1 { font-size: clamp(1.75rem, 5.5vw, 3.5rem); line-height: clamp(1.1, 1.25, 1.3); }，让行高也有弹性但幅度更克制 - 中文长段落建议加
letter-spacing: .02em，缓解小字号下的字符粘连
深色模式与高对比度系统下文字突然消失
不是字体没加载，而是系统强制覆盖了颜色。Bootstrap 的 .text-white 在 Windows 高对比主题或 macOS “增加对比度”开启后，会被渲染成纯白——如果背景也是纯白，字就没了。
- 必须用系统感知色值：
color: CanvasText（正文）或color: HighlightText（强调文本） - 加媒体查询兜底：
@media (forced-colors: active) { .lead { color: CanvasText; } } - 禁用
text-shadow或background装饰：高对比模式下这些会被忽略，只剩裸色文字，而裸色由系统决定 - 别依赖
prefers-color-scheme单独处理：它不覆盖forced-colors场景，两者需并存
Flex 容器里文字截断 + 响应式字号同时生效的条件
text-truncate 和 clamp() 在 flex 子项里经常互相打架：一个要收缩，一个要放大，结果要么不截断，要么溢出容器。
- 父容器必须设
d-flex，且子项加flex-shrink-1 - 子项必须显式声明
min-width: 0（Bootstrap 5 没内置min-w-0类，得手写或自定义） - 字号用
clamp()，但宽度控制交给max-w-full或响应式w-md-75等类，不能靠width - 示例结构：
<div class="d-flex"><div class="flex-shrink-1" style="min-width: 0"><p class="text-truncate" style="font-size: clamp(1rem, 3.2vw, 1.375rem);">长标题</p></div></div>
中英文混排时 fallback 字体链的实际坑
把 --bs-font-sans-serif 改成 "PingFang SC", "Noto Sans CJK SC", system-ui 看似合理，但 macOS 可能跳过 -apple-system 直接用中文字体，导致英文标点渲染发虚、数字不齐。
- 正确顺序：先写系统字体（
-apple-system,BlinkMacSystemFont,"Segoe UI"），再写中文字体（"PingFang SC","Noto Sans CJK SC"），最后是通用 fallback（sans-serif） - 中文字体名必须加引号，否则 Safari 解析失败
- 避免在链中插入空格分隔的字体名（如
Helvetica Neue必须写成"Helvetica Neue"） - Web 字体加载期间，fallback 链全程生效——所以中文字体位置太前，会导致英文临时“被中文化”
最易被忽略的是：可读性崩塌往往不在代码写错时，而在不同系统策略叠加的交界处——比如 forced-colors + clamp() + flex 截断同时存在，任何一个环节缺兜底，文字就可能在某台设备上彻底不可见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
