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

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

例如，如果某些元素的字体大小小于12px，则它们将变为12px。
但是，如果某些元素的字体大小为12px，则它们不会改变。

有什么办法用CSS做到吗？

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

您可以遍历页面上的元素，并使用如下所示更改较小的字体：

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

这是您可以看到完成的小提琴：http : //jsfiddle.net/mifi79/LfdL8/2/

在CSS3中，有一个简单但出色的技巧：

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

这是因为calc（）的静态部分定义了最小值。即使动态部分可能缩小到接近0的程度。

截至2019年12月中旬，CSS4最小/最大功能正是您想要的功能:(
谨慎行事，这是非常新的，较旧的浏览器（又名IE和msEdge）暂时尚不支持它）
（自2011年起受支持） Chromium 79和Firefox v75）

https://developer.mozilla.org/zh-CN/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。
自2019年12月11日起，Chrome / Chromium 79（包括Android和Android WebView）以及Microsoft Chredge aka Anaheim（包括Opera 66和Safari 11.1（包括iOS））也提供了支持

看来我来晚了，但对于其他遇到此问题的人，请尝试以下代码

p { font-size: 3vmax; }

使用您喜欢的标签和尺寸（替换3个标签）

p { font-size: 3vmin; }

用于最大尺寸。

使用媒体查询。示例：这是即时消息，使用原始大小为1.0vw，但是当它达到1000时，字母变得太小，因此我将其放大

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

我正在处理的网站对500px以上的像素没有响应，但您可能需要更多。此解决方案的优点是，您可以保持字体大小缩放，而不必使用超级迷你字母，并且可以使其保持js免费。

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>

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

AFAIK使用纯CSS是不可能的，
但是您可以执行一个非常昂贵的jQuery操作，例如：

jsBin演示

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

_{建议您（如果可能）不使用全局选择器 *，使其对选择器更加具体。}

的font-min-size和font-max-sizeCSS特性进行除去从CSS字体模块4级规格（在浏览器从不AFAIK实现）。CSS工作组用CSS示例替换了font-size: clamp(...)目前尚无最大浏览器支持的示例，因此我们必须等待浏览器支持它。请参阅https://developer.mozilla.org/zh-CN/docs/Web/CSS/clamp#Examples中的示例。

从上面的评论来看，您可以使用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中使用一个“最小字体”类来设置font-size：12px，而只需添加该类即可：

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

它将与50px完美配合。这将充当静态角色，从而充当最小宽度。

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