有多种方法可以将文本放入容器中并使其大小调整以填充该容器。我们可以使用不同的技术并考虑不同的因素。让我们来数一数这些方法。
使用视口单位设置魔法数字
如果使用vw（视口宽度）单位设置字体大小，则可以找到一个精确的数字，使文本非常接近地填充容器，并且在调整大小的时候不会换行。我称之为魔法数字。
在这种情况下，font-size: 25.5vw;适用于320px的视口，但仍然会在更小的视口中换行。
查看 Chris Coyier 在 CodePen 上的示例 使用视口单位适配文本（@chriscoyier）。
这有点类似于流体排版的简化版本，流体排版涉及更多视口单位和最小/最大尺寸的应用。
FitText
Dave Rupert 的 FitText 可以胜任这项工作。您仍然需要一些魔法数字来使文本大小调整到适合特定工作的程度。
查看 Chris Coyier 在 CodePen 上的示例 使用 FitText 适配文本（@chriscoyier）。
无需 jQuery 的 FitText
如果您没有使用 jQuery，则还有其他选择。以下是仓库中列出的选项：
- @adactio 的非 jQuery FitText
- @patrickmarabeas 的 Angular.js FitText.js
- AMP-HTML FitText
- @peacechen 的 FitText UMD
第一个选项的示例
查看 Chris Coyier 在 CodePen 上的示例 使用 FitText（无 jQuery）适配文本（@chriscoyier）。
textFit
将 FitText 中的单词颠倒一下，您就得到了 textFit！它是一个另一个 JavaScript 库，用于调整字体大小以使文本适应容器。但这里有一个很大的警告：textFit 适用于二维。因此，您需要在元素上设置width和height才能使其生效。
查看 Chris Coyier 在 CodePen 上的示例 使用 textFit 适配文本（@chriscoyier）。
fitty
fitty 更类似于 FitText，因为它仅水平调整文本大小以最大化，但实际上似乎不需要任何魔法数字。
查看 Chris Coyier 在 CodePen 上的示例 使用 fitty 适配文本（@chriscoyier）。
TextFill
TextFill 基于 jQuery，需要宽度、高度和配置的最大字体大小才能工作。这是我们一直在使用的基本演示。
查看 Chris Coyier 在 CodePen 上的示例 使用 TextFill 适配文本（@chriscoyier）。
FlowType
FlowType 旨在用于整篇文本，同时流畅地调整其大小，并具有最小和最大视口大小。但您可以根据需要对其进行范围限定。您还需要应用魔法数字来获得想要的效果。
查看 Chris Coyier 在 CodePen 上的示例 使用 FlowType 适配文本（@chriscoyier）。
直接使用 SVG
使用width: 100%和viewBox，SVG 将成为一个全尺寸框，并根据纵横比调整大小。非常巧妙的技巧！要设置文本，您需要一些魔法数字来正确设置viewBox并将文本推到正确的位置——但这可以通过零依赖项实现，就像视口单位演示一样。
查看 Chris Coyier 在 CodePen 上的示例 使用 SVG 适配文本（@chriscoyier）。
提示：vw 存在问题，因为它每次都测量错误的东西。它测量视口的初始包含块，这意味着整个视口宽度包括几乎肯定存在的垂直滚动条。这在不使用覆盖滚动条的操作系统（Windows、许多 Linux 和一些 macOS 用户选择不使用覆盖滚动条）上很重要；在 Windows 上，它通常会导致 100vw 实际上比主体宽度宽 17px。
因此，我说，如果您试图用 vw 精确测量事物：(a) 不要这样做，您无法成功；(b) 如果您坚持这样做，请确保留出至少 20px 的空隙（如果这不可接受，vw 将无法解决您的问题）——并准备好接受即使那样您的 calc(100vw – 20px) 在某些情况下也可能比主体宽度更宽。
了解了。
我发现当使用视口单位时，我通常并不追求超级精确。我经常使用它们来使用 calc 在视口中进行一些小的调整。
我解决这个问题的最佳方法是创建一个 CSS 变量
--window-width并将其设置为100vw。然后在 javascript 中，我将此 CSS 变量设置为document.body.clientWidth，这将获取窗口的宽度，不包括滚动条。关于如何垂直适配文本有什么建议吗？我总是会在上下留下一些空间，我似乎无法去除，除非使用魔法数字调整行高。
您是想根据垂直高度拉伸文本还是对其进行对齐？
将其拉伸并保持宽度比例
只有SVG在Firefox中正常工作，其他都不行。
TextFit或TextFill在Chrome或Firefox中都不起作用。
fitty似乎只在屏幕调整大小事件“结束”后才做出反应，而不是实时反应。（设计使然？）
所有这些都感觉像是10年前令人难以置信的糟糕的基于Flash的文本，除了使用vw的纯CSS（为什么将此称为“魔法”数字，因为它只是简单的数学/计算……没有任何魔法，并且完全有道理）我对Flash的批评对我来说有点好笑，因为它实际上只是一个笨拙的SVG，但SVG只是一个“图像”，对于自定义用途，我可以接受。
我同意，尝试使文本“精确”进行任何调整都是灾难的根源，并让我想起了印刷设计师将整个页面布局（包括文本）都作为一个图像制作，因为他们讨厌无法完美控制设计。
放开控制，要么使用断点，vw + calc（或其他）进行样式设置，要么放弃完美。您将获得更好的设计和更少的压力。如果您需要像素完美的布局，则可以使用SVG。CSS不必满足每个细分需求，它已经承担了超出其承受能力的负担。
大家对此有什么看法？
font-size: calc( 12px + (24 – 12) * ( (100vw – 400px) / ( 800 – 400) ));
其中12是最小字体大小，24是最大字体大小，400是最小视口宽度，800是最大视口宽度。如本文所述：https://www.chenhuijing.com/blog/math-and-front-end/#%F0%9F%8E%B9
我使用JS来实现，例如参见https://tobireif.com/demos/→查看标题时调整大小。
代码：查看源代码→“标题大小”。
Pierre Darrieutort 写信分享了与所有这些相关的库：Fitext。