单位选择在字体大小中的影响
基础单位：px、em、rem 的工作方式
在网页排版中，字体大小的单位决定了文本如何随父级或根元素变化。px 是绝对尺度，提供稳定的一致性，但不会随根字号变化而调整；em 是相对单位，基于父级字体大小进行放大或缩小，层级越嵌套，累积效应越明显；rem 则以根元素字体大小为基础，便于实现全局统一的尺度。
为了实现可控的响应式设计，通常将 rem 作为核心字体单位，并在必要时结合 em 实现局部精调。这样可以在不破坏全局尺度的前提下，对某些组件进行微调。下面给出一个常见的根字号与局部字号的示例：
:root { font-size: 16px; }
.card { font-size: 1rem; }
.card__title { font-size: 1.25rem; }根字体大小的设定直接影响到文档的整体可读性，因此在不同分辨率下保持一致性尤为关键。通过将文本尺度统一到根字号，可以降低跨设备的文本错位与排版漂移。
相对单位 vs 绝对单位的取舍
绝对单位（如 px） 适用于需要严格像素对齐的场景，如界面元素的边距和按钮尺寸，但在高DPI设备上可能显得不够灵活。
相对单位（如 rem、em、%） 更利于响应式设计，尤其是 rem，因为它让整份设计的基准字号集中在一个位置可控。需要注意的是，em 会随父级改变而放大/缩小，嵌套层级越深，影响越显著，因此在复杂组件中要谨慎使用。
代码示例与注意点
以下示例展示了在根字号固定情况下，如何通过 rem 实现一致的文本缩放，同时在删除局部字体时保持全局一致：
:root { font-size: 16px; }
.section { font-size: 1rem; }
.section__heading { font-size: 1.5rem; }在响应式场景中，可以通过媒体查询动态调整根字号，从而让整个文档对不同视口的字体进行统一放大或缩小。
响应式字体的核心工具
视口单位与 clamp() 的组合
视口单位 vw 和 vh 会随设备宽高改变，能实现随屏幕变化的自适应文本大小，但单独使用可能出现极端值。音量适配时，clamp() 函数提供了一个上限和下限的保护区，将最小字号、首选字号和最大字号整合在一起。
通过 clamps 可以实现流式文本大小的平滑过渡，避免在极小屏幕或极大屏幕上文本过小或过大。常用写法：
:root { font-size: 1vw; }
body { font-size: clamp(14px, 2.5vw, 20px); }回退机制：在不支持 clamp 的浏览器中，浏览器会退回到第二个参数所代表的值，因此需要保留一个稳健的中间值以确保可读性。
CSS 变量与调试策略
使用 CSS 自定义属性（变量）来控制字体尺度，可以在不同主题或断点下快速切换。通过观察变量的取值变化，更容易定位文本在不同场景中的行为。
变量化的字体规模能提升设计系统的可维护性，并且便于团队成员在原点上快速协作。以下示例展示了如何用变量控制基础字号，并在组件中引用：
:root { --fs-base: 16px; }
h1 { font-size: calc(var(--fs-base) * 2); }
p { font-size: calc(var(--fs-base) * 1); }设计系统下的字体尺度体系
根字体大小（root font-size）的设定
在设计系统中，统一的根字体大小是实现跨组件一致性的基石。常见做法包括设定 根字号为 16px，并结合单位换算将 1rem 映射到一个稳定的物理像素量。
为了更容易实现响应式缩放，有时会采用 62.5% 的根字号换算，即 1rem ≈ 10px，从而简化计算。可以通过媒体查询在不同断点调整根字号，以适应不同设备的阅读体验。
:root { font-size: 62.5%; } /* 1rem = 10px */
@media (min-width: 768px) { :root { font-size: 18px; } }组件内的字体大小继承与覆盖
字体大小在组件之间通常是继承的，但需要在特定场景对单独组件进行重写。通过使用 1rem、0.875rem、1.125rem 等具体单位，可以实现不同组件之间的层级差异，且保持全局尺度的可控性。
避免过度嵌套的单位叠加，要确保同一组件内尽量保持一个主字号来源，必要时再用相对单位进行局部微调。以下示例展示了一个按钮组的尺寸设定：
:root { --text-base: 1rem; }
.button { font-size: var(--text-base); }
.button--lg { font-size: 1.125rem; }
.button--sm { font-size: 0.875rem; }实践技巧与常见坑
可访问性与最小字号
在考虑无障碍时，文本的可读性与可点击区域同样重要。使用 最小字号限制，结合 clamp()、视口单位，可以确保在低分辨率设备上仍具备良好的可读性。
结合可访问性目标，避免让文本因放大缩小时变得难以阅读，尤其是正文内容。下列示例演示了一个可扩展的文本族体系：
.text--lead { font-size: clamp(12px, 2vw, 16px); }
.text--body { font-size: clamp(14px, 1.5vw, 18px); }浏览器差异与无障碍考虑
不同浏览器对默认字体缩放、用户缩放以及渲染细节存在差异。为了保证跨浏览器的一致性，可以在页面头部设置，并通过 CSS 对标题与正文的对比度、行高等进行校正。
在实际页面中测试多种设备与浏览器版本，以确保字体在不同场景下保持可读性与排版稳定性。下面是一个常用的视口设置片段：
