如何使用 max() CSS 函数获得逐渐改变字体比例的流畅排版？

Question

我是流畅排版的忠实粉丝，我希望我正在开发的网站能够采用它。最近，我了解了 max() CSS 功能。我想用它来获得流畅的排版。特别是，我希望网页上的文本从特定的字体比例开始，然后采用不同的字体。具体来说，我希望文本在一个小的起始视口上使用小三音阶。当视口变大时，我希望文本改为使用完美五度音阶。我想得到 Utopia 让你得到的结果。在那里，您可以指定要在不同视口上使用的两种类型比例。我想尝试复制相同的效果，但只使用 max() 函数，因为我不想提供“最大视口”：我的文本必须无限缩放。到目前为止，我已尝试使用此代码：

    <!DOCTYPE html>
    <html>
    <head>
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <style>
          h1   { font-size: max(2.488rem, 11.089vw); }
          h2   { font-size: max(2.074rem, 6.854vw); }    
          h3   { font-size: max(1.728rem, 4.236vw); }
          h4   { font-size: max(1.44rem, 2.618vw); }
          h5   { font-size: max(1.2rem, 1.618vw); }
       </style>
    </head>
    <body>
       <h1>Heading 1</h1>
       <h2>Heading 2</h2>
       <h3>Heading 3</h3>
       <h4>Heading 4</h4>
       <h5>Heading 5</h5>
    </body>
    </html>

此代码所做的是对每个标题使用 max() 函数，其第一个成员是小三度音阶定义的音阶，而第二个是完美五度音阶定义的音阶。要查看我在做什么，请尝试在运行上面的代码片段之后调整视口大小，您会看到标题改变比例。我不知道这段代码是否完全符合我想要实现的目标（即，从一个比例尺切换到另一个比例尺），但看起来确实如此。然而，我想避免的是，例如，h1 和 h2 元素在调整视口大小时发生变化时出现的间隔。具体来说，h1 在 h2 之前开始采用新比例 。这是有道理的，因为计算出的两个最大值不同，但我希望我的所有标题同时开始采用新比例，即当我调整视口大小时。

Answer 1

以下是您可以使用媒体查询执行此操作的方法：

h1 {
  font-size: max(2.488rem, 11.089vw);
}

h2 {
  font-size: max(2.074rem, 6.854vw);
}

h3 {
  font-size: max(1.728rem, 4.236vw);
}

h4 {
  font-size: max(1.44rem, 2.618vw);
}

h5 {
  font-size: max(1.2rem, 1.618vw);
}


/* tablet */

@media (min-width: 768px) {
  h1 {
    font-size: max(3.488rem, 16.089vw);
  }
  h2 {
    font-size: max(3.074rem, 11.854vw);
  }
  h3 {
    font-size: max(2.728rem, 9.236vw);
  }
  h4 {
    font-size: max(2.44rem, 7.618vw);
  }
  h5 {
    font-size: max(2.2rem, 5.618vw);
  }
}


/* large screens and up */

@media (min-width: 1200px) {
  h1 {
    font-size: max(4.488rem, 30.089vw);
  }
  h2 {
    font-size: max(4.074rem, 18.854vw);
  }
  h3 {
    font-size: max(3.728rem, 16.236vw);
  }
  h4 {
    font-size: max(3.44rem, 14.618vw);
  }
  h5 {
    font-size: max(3.2rem, 10.618vw);
  }
}

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
</body>

</html>

我为字体大小增加编了数字，您可以添加更多浏览器视口中断大小，甚至使用 rem 值而不是 px。

Answer 2

最后，我发现最好的解决方案是使用类似的东西：

:root {
 --step6:calc(1.602rem + 5.063vw);
 --step5:calc(1.424rem + 3.375vw);
 --step4:calc(1.266rem + 2.25vw);
 --step3:calc(1.125rem + 1.5vw);
 --step2:calc(1rem + 1vw);
 --step1:calc(0.889rem + 0.667vw);
 --step0:calc(0.79rem + 0.444vw)
}

我使用这些 CSS 变量来指定元素的大小并让文本无限缩放，而不需要使用媒体查询来指定我的设计应该更改的精确点。我只使用这些变量就得到了我想要的效果。例如，h1 元素可以使用：

h1 { font-size:var(--step6) }

和一个 h2 元素：

h2 { font-size: var(--step5) }

这让我说：«我只提供最小的值。当视口变大时，我希望尺寸可以无限缩放，使用这个比例»。当然，我不仅将这些变量用于字体大小，还用于其他属性，如边距、填充等。

如何使用 max() CSS 函数获得逐渐改变字体比例的流畅排版？

How can I get fluid typography that gradually change type scale using the max() CSS Function?

html

css

font-size

typography

viewport-units