尝试http://simplefocus.com/flowtype/.这是我在我的网站上使用的，而且效果很好。

这是一个纯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演示。调整窗口大小，直到宽度最小，段落的字体大小都相同。

这个问题有一个大的哲学。

最简单的方法是给body指定一个特定的字体大小（我建议10），然后所有其他元素的字体都是em或rem。我会给你一个例子来理解这些单位。Em始终相对于其父级：

body{font-size: 10px;}
.menu{font-size: 2em;} /* That means 2*10 pixels  = 20 pixels */
.menu li{font-size: 1.5em;} /* That means 1.5*20 pixels = 30 pixels */

Rem始终相对于身体：

body{font-size: 10px;}
.menu{font-size: 2rem;} /* That means 2*10 pixels = 20 pixels */
.menu li{font-size: 1.5rem;} /* that means 1.5*10 pixels = 15 pixels */

然后，您可以创建一个脚本，该脚本将根据容器宽度修改字体大小。但这不是我要推荐的。例如，在一个900像素宽的容器中，你会有一个字体大小为12像素的p元素。根据你的想法，它将变成一个300像素宽的容器，字体大小为4像素。必须有一个下限。

其他解决方案是媒体查询，这样您就可以为不同的宽度设置字体。

但我推荐的解决方案是使用一个JavaScript库来帮助您实现这一点。还有到目前为止我找到的fitext.js。

容器查询是CSS功能集（2022年末）的最新添加，使这一点变得简单明了。

它们允许您基于包含元素的大小应用样式，但也提供了一组用于容器查询宽度/高度的新CSS单元cqw/cqh。要使用它们，需要在要使用其大小的父元素上设置容器类型属性。下面是一个最小的示例：

＜div＞<p>Lorem ipsum dolor坐amet</p></div><style>第二部分{容器类型：内联大小；}p型{字体大小：5cqw；}</style>

随着父容器的增长，字体大小将平稳增加。在1000像素的容器宽度下，p字体大小将为1000像素/100*5=50像素。

容器类型可以是大小或内联大小。size跟踪容器的高度和宽度，允许您同时使用cqw和cqh。在网络上的大多数时间，高度是根据内容计算的，您只需指定宽度。为了节省浏览器的一些工作，您通常需要设置容器类型：inline-size；因此，浏览器只跟踪通常为宽度的内联维度（除非将写入模式设置为垂直）。

2022年下半年，浏览器对容器查询的支持快速增长，目前为75%（2023-01-01）。

始终使元素具有此属性：

JavaScript:element.style.fontSize=“100%”；

or

CSS:style=“font-size:100%；”

当您进入全屏时，您应该已经计算了一个比例变量（比例>1或比例=1）。然后，在全屏幕上：

document.body.style.fontSize = (scale * 100) + "%";

它只需要很少的代码就可以很好地工作。

我自己的解决方案，基于jQuery，通过逐渐增加字体大小来工作，直到容器的高度大大增加（这意味着它有换行符）。

它很简单，但工作得很好，而且非常容易使用。您不必了解所使用的字体，一切都由浏览器处理。

你可以在上面玩http://jsfiddle.net/tubededentifrice/u5y15d0L/2/

神奇就发生在这里：

var setMaxTextSize=function(jElement) {
    // Get and set the font size into data for reuse upon resize
    var fontSize=parseInt(jElement.data(quickFitFontSizeData)) || parseInt(jElement.css("font-size"));
    jElement.data(quickFitFontSizeData, fontSize);

    // Gradually increase font size until the element gets a big increase in height (i.e. line break)
    var i = 0;
    var previousHeight;
    do
    {
        previousHeight=jElement.height();
        jElement.css("font-size", "" + (++fontSize) + "px");
    }
    while(i++ < 300 && jElement.height()-previousHeight < fontSize/2)

    // Finally, go back before the increase in height and set the element as resized by adding quickFitSetClass
    fontSize -= 1;
    jElement.addClass(quickFitSetClass).css("font-size", "" + fontSize + "px");

    return fontSize;
};