如何在 CSS 中设置最小字体大小
Posted
技术标签:
【中文标题】如何在 CSS 中设置最小字体大小【英文标题】：How to set min-font-size in CSS 【发布时间】：2014-07-21 23:40:16 【问题描述】：我想为我的 html 页面中的每个元素设置最小字体大小。
例如，如果元素的 font-size 小于 12px，那么它们将更改为 12px。 但是如果有字体大小大于 12px 的元素，它们不会改变。
有没有办法用 CSS 做到这一点？
【问题讨论】：
【参考方案1】：在 CSS3 中有一个简单但出色的 hack：
font-size:calc(12px + 1.5vw);
这是因为 calc() 的静态部分定义了最小值。即使动态部分可能会缩小到接近 0。
【讨论】：
太棒了！ 我爱你。这太棒了。 @StefanSteiger，您可以为此使用媒体查询：(a)media (max-width: 610px)... 太棒了！正是我需要的。谢谢！ 虽然这是一个不错的 hack，但我想说这并不是一个真正的解决方案，因为当大小超过最小值时它会影响字体大小，所以你必须忍受额外的 @ 987654322@（在这种情况下）始终。【参考方案2】：截至 2019 年 12 月中旬，CSS4 最小/最大函数正是您想要的： （小心，这是非常新的，旧的浏览器（又名 IE 和 msEdge）还不支持它） （从 Chromium 79 和 Firefox v75 开始支持）
https://developer.mozilla.org/en-US/docs/Web/CSS/minhttps://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）
【讨论】：
说真的，为什么标准委员会总是删除那些实际上使我的工作可行的东西！？ @Michael，CSS WG 删除内容主要是因为缺乏实施者的兴趣或优先级。它需要两个独立的实现才能在最终的 W3C 推荐中获得 CSS 功能。写论文是没有意义的，也没有人愿意把它推到现实世界的软件中。所以你应该问浏览器供应商...... 很棒的发现！可以与 css 变量一起使用来设置最小值/最大值。示例：:root --responsive-font-size-primary: min(2em, max(0.5em, 5vmin)); 使用简单：font-size: var(--responsive-font-size-primary);
@Corey Alix：很酷，刚刚注意到对它的支持已于 2019 年 12 月 11 日到来。小心线程，所有非基于 Chromium 的浏览器尚不支持它。但是在 Chrome 中支持它是非常酷的消息。
@Michael：好消息——现在已经实现了！ （2019 年 12 月中旬）【参考方案3】：
CSS 有一个clamp() 函数来保存上下限之间的值。 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>【讨论】：
【参考方案4】：看起来我有点晚了，但其他有这个问题的人试试这个代码
p font-size: 3vmax;
使用您喜欢的任何标签和您喜欢的大小（替换 3）
p font-size: 3vmin;
用于最大尺寸。
【讨论】：
vmax 和 vmin 实际上用于指定相对于视点/页面大小的值。最小值和最大值指的是最小/最大视口，而不是字体大小的最小值或最大值——这是操作所要求的。 （例如，如果高度大于视口宽度，则 vmax 等于 100vmax = 视口高度和 100vmin = 视口宽度）【参考方案5】：使用媒体查询。例子： 这是我使用的原始尺寸是 1.0vw 但是当它达到 1000 时字母变得太小所以我将其放大
@media(max-width:600px)
body,input,textarea
font-size:2.0vw !important;
我正在处理的这个网站对 >500px 没有响应，但您可能需要更多。此解决方案的优点是您可以在没有超迷你字母的情况下保持字体大小缩放，并且可以保持 js 免费。
【讨论】：
呃。这将元素与窗口的分辨率联系起来，不是吗？这意味着通常您需要对页面上的每个元素进行单独的媒体查询。【参考方案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;
【讨论】：
【参考方案7】：.class
font-size: clamp(minimum-size, prefered-size, maximum-size)
使用它，您可以将其设置为首选值，最大值为 5vw，但最小值为 15px 或其他值，因此它不会超过 5vw，但如果 5vw
【讨论】：
【参考方案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/
【讨论】：
有没有一种简单的方法来查找尺寸小于 12px 的 jQuery 元素？ @nrofis - 当然，请参阅上面对我的答案的编辑。干杯！ 迭代页面上的所有元素并更改 CSS 属性从性能的角度来看似乎是一个非常糟糕的主意。我不是触发重排的专家，但您可能会无意中使用这种方法重排页面。我不推荐这种方法。 我支持@AvandAmiri - 这是一种糟糕的方法，因为这种想法会导致页面上出现许多其他类似的解决方案，然后导致网站性能不佳甚至内存不足会使您的应用程序崩溃的泄漏。对此的真正答案是（直到 font-size max 成为合法可用的东西）是收紧架构 - 设计和实现一个能够正确执行操作的良好系统。页面上不应有“意外”的字体大小。 @AndersLindén 在这种情况下，请在媒体查询中设置最小字体大小，例如，如果您不希望字体大小低于 10 像素：p font-size: 1vw @media (max-width: 1000px) p font-size: 10px 【参考方案9】：
AFAIK 使用纯 CSS 是不可能的， 但是你可以做一个非常昂贵的 jQuery 操作，比如：
jsBin demo
$('*').css('fontSize', function(i, fs)
if(parseInt(fs, 10) < 12 ) return this.style.fontSize = "12px";
);
不要使用 全局选择器 * 我建议您（如果可能的话）更具体地使用您的选择器。
【讨论】：
【参考方案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 中的示例。
【讨论】：
【参考方案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
但请注意，如果您稍后手动设置的字体大小大于您在此处放置的大小，则仍会覆盖此声明。
【讨论】：
【参考方案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")
);
【讨论】：
【参考方案13】：它可以完美地与 50px 配合使用。它将充当静态，因此充当最小宽度。
font-size: calc(50px + 5vw);
【讨论】：
以上是关于如何在 CSS 中设置最小字体大小的主要内容，如果未能解决你的问题，请参考以下文章