是否有min-font-size和max-font-size这样的东西？

我试图响应浏览器窗口在div中制作一种字体。到目前为止，它已经完美地工作，但父div有一个max-width的525px。进一步调整浏览器的大小不会使字体停止调整大小。这使我想知道是否存在诸如min-font-size或的东西max-font-size，以及是否不存在这种东西，是否有办法实现类似的目的。

我以为使用百分比font-size可以工作，但是文本的位数不会相应地缩放到父div。这是我所拥有的：

父div的CSS：

.textField{
    background-color:rgba(88, 88, 88, 0.33);

    width:40%;
    height:450px;

    min-width:200px;
    max-width:525px;

    z-index:2;
}

有问题的文本的CSS：

.subText{
    position:relative;
    top:-55px;
    left:15px;

    font-family:"news_gothic";
    font-size:1.3vw;
    font-size-adjust:auto;

    width:90%;

    color:white;

    z-index:1;
}

我已经在互联网上搜索了很长一段时间，但无济于事。

不，没有最小或最大字体大小的CSS属性。浏览器通常具有最小字体大小的设置，但这是在用户而不是作者的控制之下。

您可以使用@media查询来进行一些CSS设置，具体取决于屏幕或窗口的宽度。在此类设置中，例如，如果窗口非常窄，则可以将字体大小设置为特定的小值。

您可以通过使用公式并包括视口宽度来做到这一点。

font-size: calc(7px + .5vw);

这会将最小字体大小设置为7px，并根据视口宽度将其放大.5vw。

祝好运！

它与CSS配合良好。

我经历了同样的问题，并按照以下步骤进行修复。

使用固定的“ px”大小以获取特定宽度及以上的最大大小。然后，对于不同的较小宽度，使用相对的“ vw”作为屏幕的百分比。

下面的结果是，它会在960px以下的屏幕上进行自我调整，但在上方保持固定大小。提醒您，不要忘记在标题中添加html doc：

<meta name="viewport" content="width=device-width">

CSS中的示例：

@media all and (min-width: 960px) {
h1{
    font-size: 50px;
  }
}

@media all and (max-width: 959px) and (min-width: 600px) {
h1{
    font-size: 5vw;
  }
}

@media all and (max-width: 599px) and (min-width: 50px) {
h1{
    font-size: 6vw;
  }
}

希望对您有所帮助！

我来晚了一点，我没有得到太多的赞誉，我只是在做下面的回答，因为我被迫为一个项目这样做。

所以要回答这个问题：没有这个CSS属性。我不知道为什么，但是我认为这是因为他们害怕滥用此属性，但是我找不到任何用例，它可能是一个严重的问题。

不管怎样，有什么解决方案？

有两种工具可以帮助我们做到这一点：媒体查询 ans vw属性

1）有一个“傻瓜”解决方案，包括对我们在CSS中需要执行的每个步骤进行媒体查询，将字体从固定数量更改为另一个固定数量。它可以工作，但是这样做很无聊，并且您没有平滑的线性方面。

2）正如AlmostPitt解释的那样，对于最小值有一个出色的解决方案：

font-size: calc(7px + .5vw);

除视图宽度的0.5％外，此处的最小值为7px。 在大多数情况下，这已经很酷了并且可以正常工作。它不需要任何媒体查询，您只需要花费一些时间来找到正确的参数。

正如您所注意到的那样，它是一个线性函数，基础数学将使您知道两点已经找到了参数。然后，只需将非常大的屏幕和移动版本所需的字体大小固定为px，然后计算是否要采用科学方法即可。认为，这绝对没有必要，您可以尝试一下。

3）假设您有一个非常无聊的客户（如我），他绝对希望标题只占一行。如果您使用AlmostPitt解决方案，则可能会遇到麻烦，因为您的字体会不断增长，并且如果您有固定宽度的容器（例如bootstrap停在1140px处或在大窗口中停滞）。在这里，我建议您也使用媒体查询。实际上，您可以找到不需要的方面（pxMax）之前可以在容器中处理的最大px大小。这将是您的最大值。然后，您只需找到必须停止的确切屏幕宽度（wMax）。（我让你自己逆线性函数）。

之后就做

@media (min-width: [wMax]px) {
    h2{
        font-size: [pxMax]px;
    }
}

然后它是完全线性的，并且您的字体大小停止增长！注意，您不需要将以前的css属性（calc ...）放在wMax下的媒体查询中，因为媒体查询被认为更重要，它将覆盖以前的属性。

我认为对此做一个摘要没有用，因为您很难将其显示在整个屏幕上，而且毕竟不是火箭科学。

希望这可以帮助其他人，不要忘了感谢AlmostPitt的解决方案。

实际上是CSS4中提出的

W3C的工作草案

引用：

这两个属性允许网站或用户要求将元素的字体大小限制在这两个属性提供的范围内。如果计算出的值font-size在font-min-size和font-max-size创建的范围之外，则将font-size的使用值限制为这两个属性中指定的值。

这实际上将按以下方式工作：

.element {
    font-min-size: 10px;
    font-max-size: 18px;
    font-size: 5vw; // viewport-relative units are responsive.
}

字面意思是，字体大小将为视口宽度的5％，但不得小于10像素，也不得大于18像素。

不幸的是，此功能尚未在任何地方实现（甚至在caniuse.com上也未实现）。

背包非常出色，但您不必一定要构建Gulp或Grunt等工具。

我使用CSS自定义属性（CSS变量）制作了一个演示，以轻松控制最小和最大字体大小。

像这样：

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}

这些我得到了一些顺利的结果。它像连续的分段功能一样在3个宽度范围之间平滑流动。

@media screen and (min-width: 581px) and (max-width: 1760px){
    #expandingHeader {
        line-height:5.2vw;
        font-size: 5.99vw;
    }
    #tagLine {
        letter-spacing: .15vw;
        font-size: 1.7vw;
        line-height:1.0vw;
    }
}

@media screen and (min-width: 1761px){
    #expandingHeader {
        line-height:.9em;
        font-size: 7.03em;

    }
    #tagLine {
        letter-spacing: .15vw;
        font-size: 1.7vw;
        line-height:1.0vw;
    }
}

@media screen and (max-width: 580px){
    #expandingHeader {
        line-height:.9em;
        font-size: 2.3em;
    }
    #tagLine {
        letter-spacing: .1em;
        font-size: .65em;
        line-height: .10em;
    }
}

您可以使用Sass来控制最小和最大字体大小。这是Eduardo Boucas的出色解决方案。

https://eduardoboucas.com/blog/2015/06/18/viewport-sized-typography-with-minimum-and-maximum-sizes.html

@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
  $responsive-unitless: $responsive / ($responsive - $responsive + 1);
  $dimension: if(unit($responsive) == 'vh', 'height', 'width');
  $min-breakpoint: $min / $responsive-unitless * 100;

  @media (max-#{$dimension}: #{$min-breakpoint}) {
    font-size: $min;
  }

  @if $max {
    $max-breakpoint: $max / $responsive-unitless * 100;

    @media (min-#{$dimension}: #{$max-breakpoint}) {
      font-size: $max;
    }
  }

  @if $fallback {
    font-size: $fallback;
  }

  font-size: $responsive;
}

.limit-min {
  @include responsive-font(3vw, 20px);
}

.limit-min-max {
  @include responsive-font(3vw, 20px, 50px);
}

请注意，由于可访问性问题，不建议使用px设置字体大小：

“无法访问以px为单位定义字体大小，因为用户无法在某些浏览器中更改字体大小。例如，视力不佳的用户可能希望将字体大小设置为比网络设计师选择的大小大得多。” （请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/font-size）

一种更易于访问的方法是font-size: 100%在html中进行设置，该设置尊重用户的默认大小设置，然后在调整大小（em或rem）时使用百分比或相对单位来使用THEN ，例如使用@media查询。

（请参阅https://betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography/）

是的，SVG中的某些浏览器似乎存在一些限制。developertool将其限制为8000px；以下动态生成的Chart例如在Chrome中失败。

尝试http://www.xn--dddelei-n2a.de/2018/test-von-svt/

<svg id="diagrammChart"
     width="100%"
     height="100%"
     viewBox="-400000 0 1000000 550000"
     font-size="27559"
     overflow="hidden"
     preserveAspectRatio="xMidYMid meet"
>
    <g class="hover-check">
        <text class="hover-toggle" x="-16800" y="36857.506818182" opacity="1" height="24390.997159091" width="953959" font-size="27559">
            <set attributeName="opacity" to="1" begin="ExampShow56TestBarRect1.touchstart"
                 end="ExampShow56TestBarRect1.touchend">
            </set>
            <set attributeName="opacity" to="1" begin="ExampShow56TestBarRect1.mouseover"
                 end="ExampShow56TestBarRect1.mouseout">
            </set>
            Heinz: -16800
        </text>
        <rect class="hover-rect" x="-16800" y="12466.509659091" width="16800" height="24390.997159091" fill="darkred">
            <set attributeName="opacity" to="0.1" begin="ExampShow56TestBarRect1.mouseover"
                 end="ExampShow56TestBarRect1.mouseout">
            </set>
            <set attributeName="opacity" to="0.1" begin="ExampShow56TestBarRect1.touchstart"
                 end="ExampShow56TestBarRect1.touchend">
            </set>
        </rect>
        <rect id="ExampShow56TestBarRect1" x="-384261" y="0" width="953959" height="48781.994318182"
              opacity="0">
        </rect>

    </g>
</svg>