如何在 CSS 中设置最小字体大小

Question

我想为我的 HTML 页面中的每个元素设置最小字体大小。

例如，如果元素的 font-size 小于 12px，那么它们将更改为 12px。
但是如果有字体大小大于 12px 的元素，它们不会改变。

有没有办法用 CSS 做到这一点？

Answer 1

在 CSS3 中有一个简单但出色的 hack：

font-size:calc(12px + 1.5vw);

这是因为 calc() 的静态部分定义了最小值。即使动态部分可能会缩小到接近 0。

Answer 2

截至 2019 年 12 月中旬，CSS4 最小/最大函数正是您想要的：
（小心，这是非常新的，旧的浏览器（又名 IE 和 msEdge）还不支持它）
（从 Chromium 79 和 Firefox v75 开始支持）

https://developer.mozilla.org/en-US/docs/Web/CSS/min
https://developer.mozilla.org/en-US/docs/Web/CSS/max

例子：

blockquote {
    font-size: max(1em, 12px);
}

这样字体大小将为 1em（如果 1em > 12px），但至少为 12px。

不幸的是，目前任何浏览器都不支持这个很棒的 CSS3 功能，但我希望这会很快改变！

编辑：

这曾经是 CSS3 的一部分，但后来被重新安排为 CSS4。
根据December 11th 2019，Chrome/Chromium 79（包括 Android 和 Android WebView）以及 Microsoft Chredge aka Anaheim 的支持已经到来，包括 Opera 66 和 Safari 11.1（包括 iOS）

Answer 3

CSS 有一个clamp() 函数来保存上下限之间的值。 clamp() 函数可以在定义的最小值和最大值之间的值范围内选择中间值。

只需要三个维度：

1. 最小值。
2. 列表项
3. 首选值 允许的最大值。

尝试使用下面的代码，并检查窗口大小调整，这将改变您在控制台中看到的字体大小。我设置最大值150px和最小值100px。

$(window).resize(function(){
    console.log($('#element').css('font-size'));
});
console.log($('#element').css('font-size'));

h1{
    font-size: 10vw; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
    font-size: max(100px, min(10vw, 150px)); /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(100px, 10vw, 150px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
  <h1 id="element">THIS IS TEXT</h1>
</center>

Answer 4

看起来我有点晚了，但其他有这个问题的人试试这个代码

p { font-size: 3vmax; }

使用您喜欢的任何标签和您喜欢的大小（替换 3）

p { font-size: 3vmin; }

用于最大尺寸。

Answer 5

使用媒体查询。例子： 这是我使用的原始尺寸是 1.0vw 但是当它达到 1000 时字母变得太小所以我将其放大

@media(max-width:600px){
    body,input,textarea{
         font-size:2.0vw !important;
    }
}

我正在处理的这个网站对 >500px 没有响应，但您可能需要更多。此解决方案的优点是您可以在没有超迷你字母的情况下保持字体大小缩放，并且可以保持 js 免费。

Answer 6

CSS 解决方案：

.h2{
  font-size: 2vw
}
@media (min-width: 700px) {
  .h2{
    /* Minimum font size */
    font-size: 14px
  }
}
@media (max-width: 1200px) {
  .h2{
    /* Maximum font size */
    font-size: 24px
  }
}

以防万一有人需要scss mixin：

///
/// Viewport sized typography with minimum and maximum values
///
/// @author Eduardo Boucas (@eduardoboucas)
///
/// @param {Number}   $responsive  - Viewport-based size
/// @param {Number}   $min         - Minimum font size (px)
/// @param {Number}   $max         - Maximum font size (px)
///                                  (optional)
/// @param {Number}   $fallback    - Fallback for viewport-
///                                  based units (optional)
///
/// @example scss - 5vw font size (with 50px fallback),
///                 minumum of 35px and maximum of 150px
///  @include responsive-font(5vw, 35px, 150px, 50px);
///

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

Answer 7

.class {
    font-size: clamp(minimum-size, prefered-size, maximum-size)
}

使用它，您可以将其设置为首选值，最大值为 5vw，但最小值为 15px 或其他值，因此它不会超过 5vw，但如果 5vw

Answer 8

没有。虽然您可以使用font-size 属性在body 上设置基本字体大小，但此后指定较小尺寸的任何内容都将覆盖该元素的基本规则。为了做你想做的事，你需要使用 Javascript。

您可以遍历页面上的元素并使用以下方式更改较小的字体：

$("*").each( function () {
    var $this = $(this);
    if (parseInt($this.css("fontSize")) < 12) {
        $this.css({ "font-size": "12px" });   
    }
});

这是一个 Fiddle，您可以在其中看到它已完成：http://jsfiddle.net/mifi79/LfdL8/2/

Answer 9

AFAIK 使用纯 CSS 是不可能的，
但是你可以做一个非常昂贵的 jQuery 操作，比如：

jsBin demo

$('*').css('fontSize', function(i, fs){
  if(parseInt(fs, 10) < 12 ) return this.style.fontSize = "12px";
});

_{不要使用 全局选择器 * 我建议您（如果可能的话）更具体地使用您的选择器。}

Answer 10

font-min-size 和 font-max-size CSS 属性是来自 CSS 字体模块级别 4 规范的 removed（并且从未在浏览器 AFAIK 中实现）。 CSS 工作组将 CSS 示例替换为 font-size: clamp(...)，它还没有最好的浏览器支持，所以我们必须等待浏览器支持它。请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/clamp#Examples 中的示例。

Answer 11

最近添加到 CSS 的功能是 min()，它选择其参数的最小值。

所以在下面的代码中，当视口很大时（在这种情况下>1500px），font-size 被限制为 30px。

但是，对于任何小于 1500 像素的视口，都会使用其他值：例如当视口为 1000 像素时，字体大小为 20 像素。这意味着它可以非常灵敏。

p {
  font-size: min(2vw, 30px);
}

这是一个带有 min() 用于容器宽度和 p 文本的 Codepen： https://codepen.io/code0312/pen/dyWJLmB

但请注意，如果您稍后手动设置的字体大小大于您在此处放置的大小，则仍会覆盖此声明。

Answer 12

从你上面的评论来看，你可以用 jQuery 来做这件事——这里是：

// for every element in the body tag
$("*", "body").each(function() {
  // parse out its computed font size, and see if it is less than 12
  if ( parseInt($(this).css("font-size"), 10) < 12 )
    // if so, then manually give it a CSS property of 12px
    $(this).css("font-size", "12px")
});

一个更简洁的方法可能是在你的 CSS 中设置一个“min-font”类来设置 font-size: 12px，然后添加这个类：

$("*", "body").each(function() {
  if ( parseInt($(this).css("font-size"), 10) < 12 )
    $(this).addClass("min-font")
});

Answer 13

它可以完美地与 50px 配合使用。它将充当静态，因此充当最小宽度。

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