用 rem 因其基于根元素字号，配合媒体查询可批量响应式缩放；clamp() 用 rem 和 vw 混合实现平滑弹性适配；行高用无单位值、字间距微调、中文断行加 overflow-wrap；字体加载用 font-display: swap 配合 preload 避免闪动。
为什么 font-size 用 rem 而不是 px 或 %
因为 rem 基于根元素（html）的 font-size，配合媒体查询动态调整根字号，就能批量缩放所有文本，避免逐个改 h1、p、button 的尺寸。用 px 会锁死大小，响应式失效；用 % 则依赖父级，嵌套深了容易失控。
实操建议：
- 初始设置
html { font-size: 16px; }，保持默认可读性 - 在媒体查询中统一调低根字号，例如：
@media (max-width: 768px) { html { font-size: 14px; } } @media (max-width: 480px) { html { font-size: 12px; } } - 所有文本类选择器用
rem：如h1 { font-size: 2.5rem; }（即 2.5 × 当前根字号） - 慎用
em做字体单位——它随父级变化，响应式逻辑容易绕晕
clamp() 怎么让标题文字“弹性适配”而不失比例
clamp() 是现代 CSS 中最实用的响应式字体方案，它用一个函数定义最小值、首选值、最大值，浏览器自动插值计算，比写多段媒体查询更简洁、更平滑。
常见错误是把三个参数设成相同单位却忽略视口单位的影响。正确做法是混合使用 rem 和 vw：
立即学习“前端免费学习笔记（深入）”；
- 最小值保底线可读性（如
1.25rem≈ 20px） - 首选值给桌面端舒适尺寸（如
2.5rem） - 最大值防超大屏撑开（如
4rem），或用4.5vw让其随宽度增长但有上限
示例（主标题）：
h1 {
font-size: clamp(1.25rem, 4vw, 3.5rem);
}
这表示：最小不小于 20px，最大不超过 56px（假设根字号为 16px），中间按视口宽度线性过渡。注意 4vw 在小屏上可能太小，所以必须设下限兜底。
行高、字间距、断行怎么配合提升小屏阅读体验
光调字号不够。小屏空间紧张，行高太小易粘连，太大又浪费空间；字间距太紧显拥挤，太松则削弱单词识别；中文默认不断行，长标题可能溢出容器。
关键配置项：
- 行高推荐用无单位数值（如
line-height: 1.5;），它相对当前font-size计算，响应式下自动缩放 - 小屏适当加大
letter-spacing（如0.02em），尤其用于大号标题，缓解视觉压迫感 - 强制中文换行加
word-break: break-word;或更稳妥的overflow-wrap: break-word; - 禁止单词被截断：对英文内容加
hyphens: auto;并声明语言属性lang="en"
字体加载失败时如何避免文字闪动或空白
自定义字体（如 @font-face 引入的 Inter、Noto Sans）加载慢，首屏可能先显示系统字体，等下载完再重绘——这就是 FOIT（Flash of Invisible Text）或 FOUT（Flash of Unstyled Text）。
解决核心是控制 font-display 策略：
-
font-display: swap;最常用：立即用系统字体渲染，字体加载完后无缝替换 - 避免用
block（默认值），它会让文字空白等待 3 秒，用户体验差 - 搭配
preload提前加载关键字体：<link rel="preload" href="/fonts/inter-var-latin.woff2" as="font" type="font/woff2" crossorigin>
- 慎用
fallback字体族名含空格（如"Segoe UI"），务必加引号，否则解析失败退到serif
真正难处理的是字体加载完成后的重排——如果字号、行高因字体度量差异变化，页面会跳动。办法是：用 size-adjust 或 font-optical-sizing: auto 缓解，但兼容性有限；更稳的方式是选度量接近的系统字体作 fallback，比如 Inter 的 fallback 设为 "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif。
