使用vw，em&co.确实有效，但IMO始终需要人为的微调。

这是我刚刚根据@tnt-rox的回答编写的一个脚本，它试图使人类的触摸自动化：

$（'#controller'）.click（function（）{$（'h2'）.each（函数）{变量$el=$（此），max=$el.get（0），el=空;最大值=最大值? 最大偏移宽度: 320;$el.css({“font size”：“1em”，“display”：“inline”，});el=$el.get（0）；el.get_float=函数（）{变量fs=0;if（this.style&&this.style.fontSize）{fs=parseFloat（this.style.fontSize.replace（/（[\d\.]+）em/g，'$1'））；}返回fs；};el.bigger=函数（）{this.style.fontSize=（this.get_float（）+0.1）+'em'；};而（el.offsetWidth<max）{el.bigger（）；}//完成触摸。$el.css({“字体大小”：（（el.get_float（）-0.1）+'em'），'线条高度'：'正常'，'显示'：''，});}); // 结束（每个）}); // 结束（字体缩放测试）第二部分{宽度：50%；背景色：番茄；字体系列：'Arial'；}氢气{空白：nowrap；}h2：第n个孩子（2）{字体样式：斜体；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js“></script><input type=“button”id=“controller”value=“Apply”/>＜div＞<h2>Lorem ipsum dolor公司</h2><h2>测试字符串</h2><h2>甜蜜串联</h2><h2>字体缩放比例</h2></div>

它基本上将字体大小减小到1em，然后开始递增0.1，直到达到最大宽度。

JSFiddle公司

为了使字体大小适合其容器，而不是窗口，请参阅我在这个问题中分享的resizeFont（）函数（其他答案的组合，其中大多数已经链接到这里）。它使用window.addEventListener（'size'，resizeFont）；触发；。

Vanilla JavaScript：调整字体大小以适应容器

JavaScript：

function resizeFont() {
  var elements  = document.getElementsByClassName('resize');
  console.log(elements);
  if (elements.length < 0) {
    return;
  }
  _len = elements.length;
  for (_i = 0; _i < _len; _i++) {
    var el = elements[_i];
    el.style.fontSize = "100%";
    for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) {
      el.style.fontSize = size + '%';
    }
  }
}

您可能可以使用vw/vh作为备用，因此您可以使用JavaScript动态分配em或rem单位，确保在禁用JavaScript时字体可以缩放到窗口。

将.resize类应用于包含要缩放的文本的所有元素。

在添加窗口调整大小事件侦听器之前触发函数。然后，当加载页面以及调整页面大小时，任何不适合其容器的文本都将被缩小。

注意：默认字体大小必须设置为em、rem或%，以获得正确的结果。

直接媒体查询似乎是一种更简单、更容易理解的解决方案，可以根据容器大小调整字体大小，而容器大小可能是动态的。

下面将根据容器的大小调整字体大小，无论容器是否缩放到视口的大小，或是否已达到其最大值。如果您有非100%宽的容器，可以相应地调整vw。

.container {
    width: 100%;
    max-width: 600px;
}
.headline {
    font-size: 20vw;
}
.subhead {
    font-size: 5vw;
}
@media (min-width:600px) {
    .headline {
        font-size: 120px;
    }
    .subhead {
        font-size: 32px;
    }
}

如果要将其放入特定容器（如div）中，请使用：

width: max-content;

调整字体大小也有很大帮助，例如字体大小：75%。

SVG解决方案：

.树脂土{调整大小：两者；边距：0；填充：0；高度：75px；宽度：500px；背景色：浅蓝色；溢出：隐藏；}<div class=“resizeme”><svg宽度=“100%”高度=“100%”viewBox=“0 0 500 75”preserveAspectRatio=“xMinYMid满足”style=“背景色：绿色”xmlns=“http://www.w3.org/2000/svg"xmlns:xlink=“http://www.w3.org/1999/xlink"><文本x=“0”y=“75”font size=“75”fill=“黑色”>█调整此大小█</文本></svg></div>

使用foreignObject的SVG和文本换行解决方案：

.树脂土{调整大小：两者；边距：0；填充：0；高度：200px；宽度：500px；背景色：浅蓝色；溢出：隐藏；}<div class=“resizeme”><svg宽度=“100%”高度=“100%”viewBox=“0 0 500 200”preserveAspectRatio=“xMinYMin满足”><foreignObject width=“100%”height=“100%”xmlns=“http://www.w3.org/1999/xhtml"><div xmlns=“http://www.w3.org/1999/xhtml“style=”背景色：浅绿色；"><h1>标题</h1><p>调整蓝色框的大小</p＞</div></foreignObject></svg></div>

这是一个纯CSS解决方案，您承认断点是必要的，但也希望文本缩放：

我知道我可以添加断点，但我真的希望文本能够缩放还有额外的断点，否则。。。。

以下是一种方法：

自定义财产媒体查询断点clamp（）（2022年2月的浏览器支持率为93%）计算（）

如果可以使用一个通用的缩放因子来控制每个屏幕最大宽度容器内的所有文本缩放，则只需按最大宽度缩放自定义属性，并将此因子应用于1计算。

基本设置如下所示：

:root {
  --scaling-factor: 1
}

.parent {
  font-size: 30px
}

.largest {
  font-size: clamp(60%, calc(var(--scaling-factor) * 100%), 100%); 
}

.middle {
  font-size: clamp(60%, calc(var(--scaling-factor) * 85%), 100%); 
}

.smallest {
  font-size: clamp(60%, calc(var(--scaling-factor) * 70%), 100%); 
}

然后嵌套您的媒体查询，如下所示（或断点所需的任何内容）：

@media (max-width: 1200px) {
  :root {
    --scaling-factor: 0.9
  }
  @media (max-width: 800px) {
    :root {
      --scaling-factor: 0.8
    }
    @media (max-width: 600px) {
      :root {
        --scaling-factor: 0.5 /* nope, because the font-size is floored at 60% thanks to clamp() */
      }
    }
  }
}

这将最小化媒体查询标记。

优势

一个自定义属性控制所有缩放。。。无需为每个媒体断点添加多个声明使用clamp（）设置了字体大小的下限，这样可以确保文本永远不会太小（这里的下限是父字体大小的60%）

请查看此JSFiddle演示。调整窗口大小，直到宽度最小，段落的字体大小都相同。