如何实现最大字体大小？

Question

我想使用 vw 指定我的字体大小，如

font-size: 3vw;

不过，我也想把字号限制在36px。我怎样才能达到 max-font-size 的等价物，它不存在——是使用媒体查询的唯一选择？

Answer 1

在某些时候，font-size 超出了 36px 比例，找到它。假设，它超过 width: 2048px:

@media screen and (min-width: 2048px) {
  .selector {
     font-size: 36px;
  }
}

是的，遗憾的是您需要使用 @media 查询。我希望这不会影响任何事情。

Answer 2

font-size: 3vw; 表示字体大小将为视口宽度的 3%。所以当视口宽度为 1200px - 字体大小将为 3% * 1200px = 36px.

因此，使用单个媒体查询覆盖默认的 3vw 字体大小值即可轻松实现 36px 的最大字体大小。

Codepen demo（调整浏览器大小）

div {
  font-size: 3vw;
}
@media screen and (min-width: 1200px) {
  div {
     font-size: 36px;
  }
}

<div>hello</div>

更新：使用新的 CSS min() function, we can simplify the above code - without using media queries (caniuse)

div {
  font-size: min(3vw, 36px);
}

在上面的示例中，字体大小最多为 36px，但如果视口宽度小于 1200px（其中 3vw 计算的值小于 36px），字体大小将减小到 3vw

也就是说，以上述方式使用 font-size 的视口单位是有问题的，因为当视口宽度小得多时 - 比如 320px - 那么渲染的字体大小将变为 0.03 x 320 = 9.6px，这非常（太）小。

为了克服这个问题，我可以推荐使用一种叫做 Fluid Type AKA CSS Locks 的技术。

A CSS lock is a specific kind of CSS value calculation where:

there is a minimum value and a maximum value,

and two breakpoints (usually based on the viewport width),

and between those breakpoints, the actual value goes linearly from the minimum to the maximum.

假设我们要应用上述技术，使得最小字体大小在 600 像素或更小的视口宽度下为 16 像素，并且会线性增加，直到在 1200 像素的视口宽度下达到最大值 32 像素.

这可以表示如下（有关详细信息，请参阅 this CSS-tricks article）：

div {
  font-size: 16px;
}
@media screen and (min-width: 600px) {
  div {
    font-size: calc(16px + 16 * ((100vw - 600px) / 600));
  }
}
@media screen and (min-width: 1200px) {
  div {
    font-size: 32px;
  }
}

或者，我们可以使用 this SASS mixin 为我们完成所有数学运算，这样 CSS 看起来像这样：

/* 
     1) Set a min-font-size of 16px when viewport width < 600px
     2) Set a max-font-size of 32px when viewport width > 1200px and
     3) linearly increase the font-size from 16->32px 
     between a viewport width of 600px-> 1200px 
*/

div {
  @include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}

// ----
// libsass (v3.3.6)
// ----

// =========================================================================
//
//  PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
//  ---------------------------------------------------
//  Indrek Paas @indrekpaas
//
//  Inspired by Mike Riethmuller's Precise control over responsive typography
//                                                                         
//
//  `strip-unit()` function by Hugo Giraudel
//  
//  11.08.2016 Remove redundant `&` self-reference
//  31.03.2016 Remove redundant parenthesis from output
//  02.10.2015 Add support for multiple properties
//  24.04.2015 Initial release
//
// =========================================================================

@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
  @each $property in $properties {
    #{$property}: $min-value;
  }

  @media screen and (min-width: $min-vw) {
    @each $property in $properties {
      #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
    }
  }

  @media screen and (min-width: $max-vw) {
    @each $property in $properties {
      #{$property}: $max-value;
    }
  }
}

// Usage:
// ======

// /* Single property */
// html {
//   @include fluid-type(font-size, 320px, 1366px, 14px, 18px);
// }

// /* Multiple properties with same values */
// h1 {
//   @include fluid-type(padding-bottom padding-top, 20em, 70em, 2em, 4em);
// }

////////////////////////////////////////////////////////////////////////////

div {
  @include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}
@media screen and (max-width: 600px) {
  div {
     font-size: 16px;
  }
}
@media screen and (min-width: 1200px) {
  div {
     font-size: 36px;
  }
}

<div>Responsive Typography technique known as Fluid Type or CSS Locks. 
  Resize the browser window to see the effect.
</div>

Codepen Demo

更新：我们可以使用新的 clamp() CSS function (caniuse) 将上面的代码重构为简单的：

div {
  font-size: clamp(16px, 3vw, 32px);
}

参见 MDN:

clamp() allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size or above a maximum font-size. It has the same effect as the code in Fluid Typography but in one line, and without the use of media queries.

p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
<p>
If 2.5vw is less than 1rem, the font-size will be 1rem.
If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem.
Otherwise, it will be 2.5vw.
</p>

--

进一步阅读

Fluid Typography

How Do You Do max-font-size in CSS?

Fluid Responsive Typography With CSS Poly Fluid Sizing

Non-linear interpolation in CSS

Answer 3

另一种方法是慢慢增加字体大小，这不会限制最大字体大小，但即使在非常宽的屏幕上，它也会更好看。没有以完美的方式回答问题，但它的第 1 行...

font-size: calc(16px + 1vw);

更新： CSS 改进，我推荐使用 clamp(min, preferred, max) 功能：

font-size: clamp(12px, 2vw, 20px);

Answer 4

这是另一个想法。 calc 函数使用双精度浮点数。因此它在 1e18 附近表现出阶跃函数。例如，

width: calc(6e18px + 100vw - 6e18px);

这将捕捉到值 0px、1024px、2048px 等。请参阅笔 https://codepen.io/jdhenckel/pen/bQNgyW

step 函数可用于创建 abs 值，min/max 通过一些巧妙的数学运算。例如

max(x, y) = x - (x + y) * step(y - x)

给定 step(z) 在 z<0 时为零，否则为 1。

只是一个想法，不是很实用，但尝试可能会很有趣。

(注意： 该技术依赖于任何规范中没有的实现细节；目前，它适用于 Chrome 和 Safari，但不适用于 Firefox， Edge 或 Internet Explorer，不对 CSS 值使用双精度浮点数。）

更新： 这个 post 不再有用（曾经有用过吗？）因为 CSS 现在支持 min, max, and clamp.

Answer 5

据此website（本站有广告），如果你不想使用 clamp():

font-size: 24px;  

font-size: min(max(3.5vw, 16px), 40px);

IE 的第一行。
其他人的第二行，表示 font-size:3.5vw, max-font-size:40px, min-font-size:16px.

如何实现最大字体大小？

How to implement max-font-size?

css

viewport-units

Codepen demo（调整浏览器大小）

更新：使用新的 CSS min() function, we can simplify the above code - without using media queries (caniuse)

更新：我们可以使用新的 clamp() CSS function (caniuse) 将上面的代码重构为简单的：

进一步阅读