如何在 CSS 中使用 max-font-size？

CSS 没有 max-font-size，所以如果我们需要类似的东西，我们就得想点办法。

为什么你需要它呢？好吧，font-size 本身可以以动态方式设置。例如，font-size: 10vw;。它使用“视窗单位”来调整类型大小，这会随着浏览器窗口大小的改变而变大或变小。如果我们有 max-font-size，我们可以限制它的最大尺寸（类似地，我们可以使用 min-font-size 来限制最小尺寸）。

一种解决方案是在特定屏幕尺寸断点使用媒体查询来设置非相对单位的字体大小。

body {
  font-size: 3vw;
}
@media screen and (min-width: 1600px) {
  body {
     font-size: 30px;
  }
}

有一个名为 CSS 锁定 的概念，它更高级，在最小值和最大值之间缓慢缩放值。 我们已经涵盖了这一点。 它可以像这样…

body {
  font-size: 16px;
}
@media screen and (min-width: 320px) {
  body {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}
@media screen and (min-width: 1000px) {
  body {
    font-size: 22px;
  }
}

我们还介绍了如何 它变得（或将变得）更简单.

CSS 中有一个 max() 函数，因此上面的示例变成了一行代码

font-size: max(30vw, 30px);

或者用最小值和最大值进行双重运算

font-size: min(max(16px, 4vw), 22px);

这与以下代码相同

font-size: clamp(16px, 4vw, 22px);

当我在写这篇文章的时候，这些函数的浏览器兼容性 相当稀疏，但 Chrome 目前支持它。它会实现的，但是如果你现在需要它，请查看这篇文章中的第一个选项。

现在我们有了这些函数，我认为我们不太可能在 CSS 中获得 min-font-size 和 max-font-size，因为这些函数本身就足够清晰了。