Question

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

例如，如果字体大小小于12px的元素，则它们将更改为12px 但是如果有字体大小的元素然后是12px，它们就不会改变。

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

Answer 1

在CSS3中有一个简单但非常出色的黑客：

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

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

Answer 2

这可能不是您想要的，但在CSS 3中，您可以使用max-function。

示例：

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

这样，font-size将是1em（如果1em> 12px），但至少为12px。

不幸的是，任何浏览器都不支持这个令人敬畏的CSS3功能，但我希望这很快就会改变！

Answer 3

看起来我有点迟了但对于有这个问题的其他人来说，试试这段代码

p { font-size: 3vmax; }

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

p { font-size: 3vmin; }

用于最大尺寸。

Answer 4

使用媒体查询。例：这是我使用原始大小为1.0vw，但当它达到1000时，字母变得太小，所以我扩大它

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

我正在处理的这个网站对＆gt; 500px没有响应，但您可能需要更多。这个解决方案的优点是，你可以保持字体大小缩放，而不需要超级迷你字母，你可以保持js免费。

Answer 5

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 6

CSS有一个clip（）函数，可将值保留在上限和下限之间。使用clamp（）函数可以在定义的最小值和最大值之间的范围内选择中间值。

它只需要三个维度：

最小值。
列表项
首选值最大允许值。

尝试使用下面的代码，并检查窗口调整大小，这将更改您在控制台中看到的字体大小。我设置了最大值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 7

没有。虽然您可以使用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/

Answer 8

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

<强> jsBin demo

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

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

Answer 9

font-min-size和font-max-size CSS属性是removed来自CSS字体模块4级规范（从未在浏览器AFAIK中实现）。 CSS工作组用font-size: clamp(...)代替了CSS示例，该示例目前尚无最大的浏览器支持，因此我们必须等待浏览器支持。参见https://developer.mozilla.org/en-US/docs/Web/CSS/clamp#Examples中的示例。

Answer 10

根据您的上述评论判断，您可以使用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")
});

更简洁的方法可能是使用＆＃34; min-font＆＃34; CSS中设置font-size：12px的类，只需添加该类：

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

Answer 11

最近添加到 CSS 的一个特性是 min()，它选择其参数的最小值。

所以在下面的代码中，当视口很大（在本例中为 >1500px）时，字体大小限制为 30px。

但是对于任何小于 1500px 的视口，使用另一个值：例如当视口为 1000 像素时，字体大小将为 20 像素。这意味着它可以非常敏感。

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

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

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

Answer 12

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

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

如何在CSS中设置min-font-size

12 个答案: