挑战：没有原生 CSS 解决方案

我首先探索了现有的库，但它们都有一个缺陷：它们需要在渲染之前测量需要拉伸的文本。这对我们来说是不可接受的，因为 Framer 网站是静态生成的，需要在 JavaScript 运行之前在任何浏览器中完美渲染。接下来，我尝试了 font-size: 100vw，如果文本填满屏幕，它会很好用。但是，如果您希望文本填满任意容器，它就会变得具有挑战性。为此，您需要构建一个复杂的 CSS calc 表达式，该表达式表示所有祖先的大小，以总 vw 的百分比表示。尽管这是可行的（并且 Framer 已经执行以优化图像质量），但它会使创建包含具有 vw 大小的文本的 组件 变得困难，因为很难在隔离组件代码中知道祖先的大小。

解决方案：带 viewBox 和 foreignObject 的 SVG

我发现带有 viewBox 的 SVG 以及通过 foreignObject 元素在 SVG 中支持 HTML，可以提供缩放效果。这种技巧需要知道文本的精确边框并将其提交给 viewBox，然后将文本渲染到 SVG 内的 foreignObject 中。foreignObject 意味着屏幕阅读器和 SEO 可以在其中轻松找到文本。需要注意的是，SVG 的 viewBox 需要在文本大小更改时更新，并且需要保持同步；否则，文本将被截断或未居中。这可能排除了此解决方案适用于大多数自定义站点。简单来说，在任何文本被编辑或其影响其大小的属性发生变化时，确定此 viewBox 是不可行的。

自动化：Framer 来拯救

幸运的是，Framer 可以自动化这个过程，省去了在文本更改时手动更新 viewBox 的麻烦。每当您将文本设置为“自适应”时，Framer 会在其当前的 font-size 下测量文本，获取边框，保存它，并在您的文本周围渲染一个带有 viewBox 的 SVG。每次您编辑文本时，Framer 都会重复该过程，以确保 viewBox 保持与文本相关。Framer 甚至可以通过根据其当前宽度进行一些基本数学计算，在您在文本编辑器中打开文本时将其字体大小转换回像素，从而支持无缝编辑体验。当您完成编辑时，Framer 会将 viewBox 放回原位，然后它又可以轻松缩放，而不会对画布性能产生任何影响。

结果：黄油般顺滑的调整大小

当您部署您的站点时，viewBox 已经计算完毕，因此 Framer 可以静态生成站点，并且文本甚至在 JavaScript 加载之前就会以完全正确的尺寸渲染。这不会导致闪烁、大小调整或淡入，并且可以实现黄油般顺滑的大小调整。

未来：容器查询

未来，我们计划在 Framer 支持的浏览器完全支持容器查询后，就切换到容器查询。您可以使用 cqw 单位，就像使用 vw 单位一样，但是 cqw 相对于容器。这适用于组件，因为它消除了对复杂 CSS calc 语句的需求。

自适应文本是 Framer 如何抽象工程工作的一个很好的例子，这些工作在逐个基础上很难实现，而是让您专注于交付出色的站点。很高兴看到人们将用这个新功能构建什么。