文本自适应容器字号是一种技术，让文字大小根据其所在容器的宽度动态调整。当容器变宽时字号自动增大，容器变窄时字号自动缩小，确保文本始终完美填充容器空间而不会溢出或留白过多。这在响应式网页设计中非常实用，尤其适合标题、Banner文字、卡片标题等需要随布局变化的场景。主流实现方式包括CSS的clamp()函数配合vw单位、JavaScript动态计算、以及CSS容器查询（Container Queries）。

clamp(MIN, PREFERRED, MAX) 是CSS的数学函数，它接收三个参数：最小值、首选值和最大值。函数返回首选值，但如果首选值小于最小值则返回最小值，大于最大值则返回最大值。

用于字体缩放时：font-size: clamp(14px, 4vw, 80px); 表示字号在14px到80px之间，首选使用视口宽度的4%。在小屏幕上4vw可能小于14px，此时字号锁定为14px；在大屏幕上4vw可能超过80px，此时字号锁定为80px；在中间范围内字号随视口宽度平滑缩放。这种技术无需JavaScript，性能极佳，是现代响应式字体的最佳实践。

vw（Viewport Width）是CSS中的视口单位，1vw等于视口宽度的1%。使用vw设置字体时，文字大小会随浏览器窗口宽度自动缩放。

例如 font-size: 5vw; 在1920px宽的屏幕上等于96px，在375px宽的手机屏幕上等于约19px。配合clamp()可以限制缩放范围，避免文字过小或过大。

需要注意的是，vw是相对于整个视口（浏览器窗口）的，而非相对于父容器。如果希望字体相对于特定容器缩放，可以结合容器查询（Container Queries）使用cqi（Container Query Inline）单位，或者使用JavaScript根据容器实际宽度动态计算。

容器查询（Container Queries）允许根据父容器的尺寸而非视口尺寸来设置样式，这是CSS发展的重要里程碑。

使用步骤：
1. 在父容器上声明 container-type: inline-size;
2. 使用 @container (min-width: Xpx) { ... } 设置条件样式
3. 在条件内设置不同的font-size

示例：
@container (max-width: 400px) { .text { font-size: 16px; } }
@container (min-width: 401px) and (max-width: 800px) { .text { font-size: 28px; } }
@container (min-width: 801px) { .text { font-size: 48px; } }

容器查询的浏览器支持：Chrome 105+, Safari 16+, Firefox 110+, Edge 105+。

单行文本（white-space: nowrap）：字号计算相对简单，目标是让整行文字恰好填满容器宽度。文本不会换行，字号与所需宽度呈线性关系——字号翻倍，文本宽度也翻倍。这使得使用clamp()配合vw的线性插值非常精确。

多行文本（自动换行）：字号计算更复杂，因为文本会在容器边缘自动换行。字号较大时文本占据更多行，字号较小时行数减少。需要同时考虑宽度和高度两个维度。对于固定高度的容器，需要二分查找找到既不水平溢出也不垂直溢出的最大字号。对于高度自适应的容器，主要关注水平方向不溢出（避免单词断裂或水平滚动条）。

一般建议：标题类使用单行模式配合clamp()；正文段落使用固定字号或容器查询设置断点字号。

移动端文本可读性的关键原则：
• 设置合理的最小字号：使用clamp()时，最小值不应小于14-16px，确保在小屏手机上也能清晰阅读。
• 避免纯vw单位：font-size: 3vw;在320px宽屏幕上仅9.6px，几乎无法阅读。务必使用clamp()设置下限。
• 考虑触控目标：如果文字是链接或按钮，确保最小触控区域为44×44px（iOS HIG标准）。
• 测试实际设备：在真实手机上测试，不同设备渲染效果有差异。
• 使用相对单位：rem、em配合clamp()可以兼顾用户字体偏好设置。
• 关注对比度：小字号需要更高的对比度来保证可读性，符合WCAG AA标准（对比度至少4.5:1）。

FitText.js是经典的jQuery插件，其原理是使用JavaScript动态调整字号：
1. 获取容器宽度
2. 根据预设比例计算字号（如容器宽度的1/10）
3. 将计算出的字号设置到元素上
4. 监听窗口resize事件重新计算

类似的库还有FlowType.js、TextFill等，它们使用二分查找或比例计算来找到最佳字号。

JS方案 vs CSS方案对比：
• JS方案优势：精确控制，支持复杂逻辑，兼容老旧浏览器
• JS方案劣势：需要监听事件，有性能开销，可能出现闪烁（FOUC），依赖JavaScript可用
• CSS方案优势：GPU加速，无闪烁，无需JS，性能极佳，代码简洁
• CSS方案劣势：基于视口而非容器（除非使用容器查询），控制精度略低

现代项目推荐优先使用CSS clamp()方案，只有需要基于容器精确计算时使用JS。

clamp()函数的浏览器支持情况（截至2024年）：
• Chrome 79+（2019年12月发布）
• Firefox 75+（2020年4月发布）
• Safari 13.1+（2020年3月发布）
• Edge 79+（2020年1月发布）
• Opera 66+
• iOS Safari 13.4+
• Android Chrome 120+

全球覆盖率超过97%。对于需要兼容IE11等老旧浏览器的项目，可以设置fallback：
font-size: 24px; /* fallback */
font-size: clamp(16px, 4vw, 48px);

不支持clamp()的浏览器会忽略该声明并使用fallback值。

计算最佳vw值需要确定字体在不同容器宽度下的目标大小。以单行文本为例：

步骤：
1. 确定文本在最小容器宽度W1时需要的最小字号S1
2. 确定文本在最大容器宽度W2时需要的最大字号S2
3. 计算vw值：vw = ((S2 - S1) / (W2 - W1)) × 100
4. 最终CSS：font-size: clamp(S1, Xvw, S2);

示例：
容器宽度300px时字号16px，容器宽度1000px时字号80px：
vw = ((80-16) / (1000-300)) × 100 = (64/700) × 100 ≈ 9.14vw
font-size: clamp(16px, 9.14vw, 80px);

在1920px屏幕上，9.14vw≈175px，但clamp会限制为80px最大值；在375px屏幕上，9.14vw≈34px，在16-80px范围内正常显示。

本工具使用二分查找算法在浏览器中实测最佳字号，并自动计算对应的vw值，确保精度。