是否存在最小字号和最大字号？

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

- Toby van Kempen

---

第一次看到vw在字体中使用，哈哈 - brandito

Answer 1

您可以通过使用公式并包含视口宽度来完成。

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

这将最小字号设置为7px，并根据视口宽度将其放大0.5vw。

- Brad Ahrens

---

天啊！过去3天我一直在尝试使用数字和不同的方法来做这件事情。让我告诉你，没有什么真的像我想要的那样有效。然后，我看到了你的回答，把你的答案插入我的CSS中，“哇塞”它起作用了……太棒了Pitt，非常感谢你。 - ThN

一个很好的最小字体大小技巧。我想知道是否有类似的东西可以用于最大字体大小...可能与任何负数都被视为“0”的想法有关。一些嵌套的calc或其他什么东西？ - Lazar Ljubenović

反转它，这样字体大小就是：calc(12px - .5vw)。 - roberrrt-s

在这里发布：https://stackoverflow.com/questions/49500754/using-css-calc-at-runtime-with-less-precompiler - user736893

@Michael，您可以使用媒体查询来实现。手动计算过渡位置（这里是在44px = 5vh处，因此视口高度为880px），然后设置媒体查询，当视口<880px时为44px字体，否则为0.5vh。 - GKFX

Answer 2

它在CSS中表现良好。

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

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

下面的结果是，在960像素以下的屏幕上自动调整大小，但在以上保持固定大小。提醒一下，请不要忘记在头部添加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;
  }
}

- Willy VAN INGEN

---

这应该是最好的答案！！ - KaKa

为什么每一行都有'all'？ - tibi

@tibi all指的是媒体类型（或：应用范围）。选项包括all、screen、print和speech。默认为all，因此在此处有点过时。请参阅mdn文档。 - honk31

是的！这个完美地运行了！我想要的是最大字体大小，这个完美地运行了，谢谢。 - todbott

Answer 3

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

您可以使用媒体查询根据屏幕或窗口宽度等条件进行一些CSS设置。在这样的设置中，如果窗口非常窄，您可以将字体大小设置为特定的小值。

- Jukka K. Korpela

---

如果我没错的话，你链接中的信息表明媒体查询会在满足条件时执行指定的CSS，而在你链接中，条件是 max-width:600px;。我理解得对吗？还是我没有正确理解链接背后的信息？ - Toby van Kempen

@Toby van Kempen：你说得没错，但在这种情况下，max-width是指屏幕视口的大小，而不是任意元素的大小。如果您需要根据某个任意元素的样式更改CSS，则无法使用媒体查询。您需要一个脚本来实现。 - BoltClock

啊，我明白了。所以，如果我没记错的话，如果我写@media (width:600px)，那么一旦浏览器宽度等于600像素，它就会运行@media下面的脚本？ - Toby van Kempen

+1. 使用窗口宽度/高度的媒体查询完全满足了OP的需求。在他的情况下，他将获得与设置最大字体大小完全相同的结果。无论如何，我仍然可以想到其他一些情况下该属性仍然很方便。 - Francesco Frapporti

@Jukka K. Korpela，您能否更新您的答案，包括min()、max()和clamp()函数？这个问题在搜索中排名很高，因此提供完整、最新的信息非常重要。 - Foo Bar

Answer 4

我来晚了一点，这里并没有给我太多的信用。因为我是强制性地对下面的答案进行混合，以完成一个项目。

所以回答这个问题：没有这种CSS属性。我不知道为什么，但我认为这是因为他们担心这个属性被滥用，但我没有找到任何可以成为严重问题的用例。

那么，解决方案是什么？

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

1）有一个“愚蠢”的解决方案，就是为我们在css中想要的每一步都制作一个媒体查询，将字体从固定数量更改为另一个固定数量。它有效，但非常无聊，并且你没有平滑的线性外观。

2）正如AlmostPitt所解释的那样，存在一种卓越的解决方案用于最小值：

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

最小值应为7像素，再加上视口宽度的0.5％。 这已经非常酷，并且在大多数情况下都可以使用。它不需要任何媒体查询，你只需花些时间找到正确的参数。

正如你所注意到的，它是一个线性函数，基本数学告诉你两个点已经找到了参数。然后，只需在非常大的屏幕和移动版本中固定要使用的像素字体大小，然后计算是否要进行科学方法。虽然不完全必要，但你也可以尝试一下。

3）假设你有一个非常无聊的客户（就像我一样），他绝对希望标题只占用一行而不超过。如果你使用AlmostPitt的解决方案，那么你会遇到麻烦，因为你的字体将继续增长，如果你有一个固定宽度的容器（如Bootstrap在大窗口中停在1140px或某些位置）。

这里我建议你还要使用媒体查询。实际上，你只需找到在容器中可以处理的最大像素大小（pxMax）之前的纵横比变得不想要的数量即可。这将是您的最大值。然后，你只需找到必须停止的确切屏幕宽度（wMax）。 （我让你自己反转一个线性函数）。

之后只需执行

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

那么它就是完全线性的，你的字体大小停止增长！请注意，在wMax下，您不需要将先前的CSS属性（calc...）放在媒体查询中，因为媒体查询被认为比较重要，它会覆盖先前的属性。

我认为为此制作片段没有用，因为您会很难将其制作为整个屏幕，并且这毕竟不是火箭科学。

希望这能帮助其他人，不要忘记感谢AlmostPitt提供的解决方案。

- Alburkerk

---

你能否提供一个公式来找到正确的calc()值，使其返回与max(*a*px,, *b*vw)相同的结果？因为在我的情况下，我不能容忍简单的加法，因为结果太大了，但是听起来你似乎在暗示我可以以某种方式减少a和b的数量 - 我很难算出数学问题，并且我需要一个通用解决方案，而不仅仅是一个特定的情况。 - Michael

我能想到的唯一好的解释是需要用图像来解释，无法通过评论帮助你，建议你创建一个新问题。 - Alburkerk

Answer 5

这实际上是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上也没有）。

- roberrrt-s

---

好的。那我只需要在这个项目上停止工作几年，直到这个实施了... :'-( - Michael

Answer 6

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一起使用，作为放置于bootstrap容器元素内图像之上的视频播放图标，并设置了max-width。

- franklylately

---

终于了。感谢您比我在谷歌上找到的博客文章更好地解释了每个数字的作用。当我滚动到页面底部寻找您的答案时，我真的要放弃了。谢天谢地，我不必添加所有那些荒谬的SASS变量和@media无聊的东西以及其他任何东西。 - velkoon

你也可以使用 font-size: clamp(16px, 1.4vw, 22px) 来替代使用 min() 和 max()，其中 16px 是最小值，22px 是最大值。 - mph

Answer 7

Rucksack非常出色，但您不一定需要使用构建工具如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);
}

- Dannie Vinther

Answer 8

我用这些得到了非常流畅的结果。它在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;
    }
}

- Chris Topillogical

---

这与其他答案有何不同？ - user193661

Answer 9

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

- Matt

Answer 10

请注意，使用px设置字体大小不推荐，因为这会影响可访问性：

“在某些浏览器中，使用px定义字体大小是不可访问的，因为用户无法更改字体大小。例如，视力受限的用户可能希望将字体大小设置为比网页设计师选择的大小大得多。”

（参见https://developer.mozilla.org/en-US/docs/Web/CSS/font-size）

更具可访问性的方法是在html中设置font-size: 100%，这样可以尊重用户默认的大小设置，然后使用百分比或相对单位进行调整（如em或rem），例如使用@media查询。

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

- DepecheCode