Question

我正在尝试在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;
}

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

Answer 1

您可以使用公式并包含视口宽度来完成此操作。

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

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

祝你好运！

Answer 2

适用于CSS。

我经历了同样的问题并修复如下。

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

以下结果是它在960px以下的屏幕上自行调整，但保持固定大小。提醒一下，不要忘记在标题中添加html文档：

<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;
  }
}

我希望它会有所帮助！

Answer 3

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

您可以使用@media queries进行一些CSS设置，具体取决于屏幕或窗口宽度等内容。在这样的设置中，您可以例如如果窗口很窄，请将字体大小设置为特定的小值。

Answer 4

我来这里有点晚了，我没有得到这么多的信任，我只是混合了下面的答案，因为我被迫为一个项目做这件事。

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

无论如何，解决方案是什么？

我们可以使用两个工具执行此操作：media queries ans vw property

1）有一个“傻瓜”解决方案，包括对我们在css中的每个步骤进行媒体查询，将字体从固定金额更改为另一个固定金额。它很有用，但它很无聊，而且你没有平滑的线性方面。

2）正如AlmostPitt所解释的那样，最小化有一个明智的解决方案：

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

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

正如您所注意到它是一个线性函数，基本数学会让您了解到两点已经找到了参数。然后只需要在非常大的屏幕和移动版本中修复px中的字体大小，然后计算是否要进行科学的方法。想一想，这绝对没有必要，你可以尝试一下。

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

之后就去做

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

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

我不认为为此制作一个片段是有用的，因为你很难将它制作成全屏幕而且它毕竟不是火箭科学。

希望这可以帮助别人，并且不要忘记感谢AlmostPitt的解决方案。

Answer 5

背包很棒，但你不一定要使用像Gulp或Grunt等建造工具。

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

像这样：

* {
  /* 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);
}

Answer 6

我得到了一些顺利的结果。它在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;
    }
}

Answer 7

您可以使用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);
}

Answer 8

这实际上是在CSS4

中提出的

Working draft at the 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上实现）。

Answer 9

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

“

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

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

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

Answer 10

CSS min（）和max（）在2020年的使用率相当不错。

下面的代码使用max（）来获取[variablevalue]和[minimumvalue]中的最大值，然后将其传递给min（）与[maximumvalue]相对，以获取两者中的较小者。这样会创建一个允许的字体范围（最小为3.5rem，最大为6.5rem，仅在两者之间使用6vw）。

font-size: min(max([variablevalue], [minimumvalue]), [maximumvalue]);
font-size: min(max(6vw, 3.5rem), 6.5rem);

我专门将它与font-awesome一起用作设置了max-width的bootstrap容器元素内图像上的视频播放图标。

Answer 11

font-size: min(max(0.7rem, 3vw), 2rem);

简单输入最小值 - 响应式 - 最大值。 2021年支持率接近98%。

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

11 个答案:

这实际上是在CSS4