如何让字体等比例缩放

如果您曾经尝试过创建响应式类型，该类型在基于视口或容器宽度的类型比例内在预定大小之间无缝适应和缩放，那么您可能已经与 JavaScript 搏斗或与 CSS 计算器争吵。但是借助 calc（）、clamp（） 和 CSS vars 的有点不稳定的使用，我们可以简化这个过程并利用现代 CSS 提供的动态性。我们可以创建真正流畅的字体比例，使用可组合和响应式字体实用程序，让您的字体调整大小并适应视口或容器宽度。

下面就深入探讨一下如何实现这个效果。如果您只是想将此功能放入项目中，我在一个名为bendable小型类型规模库中收集了一系列类型规模 CSS 实用程序，其中包含断点类和其他实现更高粒度类型控制的方法。

开始

从理论上讲，创建这个计算应该相当简单，但 CSS calc（） 的僵化会让这个过程感觉像是在语义雷区中导航。不幸的是，CSS calc（） 目前不允许在无单位数字和像素值之间进行隐式转换，因此获得完全正确的语法可能很棘手。这些限制在 css-values-4 规范中已经放宽，但在这些更改在浏览器中实现并得到广泛支持之前，我们将不得不解决当前的限制。

绕过当前限制的一种方法是，只要有可能，将值作为无单位数字传递，而不是作为像素值传递，然后在我们需要它们作为像素时将它们转换为像素（通过将它们乘以 1px）。通过这种策略，我们可以实现自适应类型，使其忠于预先确定的类型规模。以下是计算的明细（为清楚起见，请添加换行符和注释）：

.container-adaptive {
  --font-size: calc(
    /* Minimum size in pixels -> the starting point */
    var(--min-size) * 1px +
    /* Diff between min and max -> how much should we add in total? */
    ((var(--max-size) - var(--min-size)) *
      /* Container size minus starting point -> how far are we? */
    (100cqw - var(--container-min) * 1px) /
    /* Diff between min and max container width -> the range */
    (var(--container-max) - var(--container-min))
  );

  /* Clamp between min and max, to avoid overshooting */
  font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}

解压计算

用简单的英语来说，计算字体大小的公式是最小字体大小 + 最小和最大字体大小之间的差异 * 当前容器宽度相对于其最小值和最大值。在它的输入中，它读取 calc（var（--min-size） * 1px + （var（--max-size） - var（--min-size）） * （100cqw - var（--container-min） * 1px） / （var（--container-max） - var（--container-min）））。同样，使用 CSS calc（） 进行正确的计算有点棘手，而且看起来有点不稳定，因为我们：

• 无法将无单位数字添加到像素值（calc(5px + 5)无效）
• 无法将像素值除以像素值（calc(10px / 2px)无效）
• 无法将像素值与像素值相乘（calc(5px * 2px)无效）

换句话说，在执行加法和减法时，两个值需要具有相同的格式。进行除法和乘法时，至少有一个参数必须是无单位数。为了确保计算在这些约束内进行，我们最初将所有值设置为无单位数字，并在需要时将它们转换为像素。

当所有这些结合在一起时，我们的变量和计算设置可以看起来像这样（注意变量缺少px单位 - 所有这些变量都隐含像素）：

:root {
  --min-size: 12;
  --max-size: 18;
  --container-min: 320;
  --container-max: 2400;
  --viewport-min: 320;
  --viewport-max: 2400;
}

.container-adaptive {
  --font-size: calc(var(--min-size) * 1px + (var(--max-size) - var(--min-size)) * (100cqw - var(--container-min) * 1px) / (var(--container-max) - var(--container-min)));
  font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}

.viewport-adaptive {
  --font-size: calc(var(--min-size) * 1px + (var(--max-size) - var(--min-size)) * (100vw - var(--viewport-min) * 1px) / (var(--viewport-max) - var(--viewport-min)));
  font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}

最后，我们使用 clamp（） 来避免超过我们的最小值和最大值。使用此特定设置，当容器或视口大小为 320 像素或更小时，字体大小将设置为 12 像素，在 320 像素和 2400 像素的容器/视口大小之间从 12 像素线性缩放到 18 像素，然后在容器或视口宽度达到 2400 像素时停止在 18 像素。要设置相对于视口大小的大小，我们使用 vw 单元，要设置相对于容器的大小，我们使用 cqw 单元.

设置实用程序

:root {
  --min-size: 12;
  --max-size: 18;
  --container-min: 320;
  --container-max: 2400;
}

/* Setup size calculation for all max utilities */
.h1-max, .h2-max, .h3-max, .h4-max, .h5-max, .h6-max, .h7-max, .h8-max {
  --font-size: calc(var(--min-size) * 1px + (var(--max-size) - var(--min-size)) * (100cqw - var(--container-min) * 1px) / (var(--container-max) - var(--container-min)));
  font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}

.h1-max { --max-size: 128; }
.h2-max { --max-size: 96; }
.h3-max { --max-size: 64; }
.h4-max { --max-size: 48; }
.h5-max { --max-size: 32; }
.h6-max { --max-size: 24; }
.h7-max { --max-size: 16; }
.h8-max { --max-size: 12; }

.h1-min { --min-size: 128; }
.h2-min { --min-size: 96; }
.h3-min { --min-size: 64; }
.h4-min { --min-size: 48; }
.h5-min { --min-size: 32; }
.h6-min { --min-size: 24; }
.h7-min { --min-size: 16; }
.h8-min { --min-size: 12; }

<!-- Mix and match as you wish -->
<h1 class="h5-min h1-max">...</h1>
<h2 class="h6-min h2-max">...</h2>
<h3 class="h7-min h3-max">...</h3>
<h4 class="h8-min h4-max">...</h4>

局限性

以上就是如何让字体等比例缩放的详细内容，更多请关注全栈开发网其它相关文章！