Html 如何在 CSS 中设置最小字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23984629/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set min-font-size in CSS
提问by nrofis
I want to set a minimum font size to every element in my HTML page.
我想为 HTML 页面中的每个元素设置最小字体大小。
For example if there are elements with font-size less then 12px, then they will change to 12px.
But if there are elements with font-size grater then 12px, they will not change.
例如，如果有字体大小小于 12px 的元素，那么它们将更改为 12px。
但是如果有字体大小大于 12px 的元素，它们就不会改变。
Is there any way to do it with CSS?
有没有办法用CSS来做到这一点？
采纳答案by mifi79
No. While you can set a base font size on bodyusing the font-sizeproperty, anything after that that specifies a smaller size will override the base rule for that element. In order to do what you are looking to do you will need to use Javascript.
不可以。虽然您可以在body使用该font-size属性时设置基本字体大小，但在此之后指定较小大小的任何内容都将覆盖该元素的基本规则。为了做你想做的事情，你需要使用 Javascript。
You could iterate through the elements on the page and change the smaller fonts using something like this:
您可以遍历页面上的元素并使用以下内容更改较小的字体：
$("*").each( function () {
var $this = $(this);
if (parseInt($this.css("fontSize")) < 12) {
$this.css({ "font-size": "12px" });
}
});
Here is a Fiddle where you can see it done: http://jsfiddle.net/mifi79/LfdL8/2/
这是一个小提琴，你可以看到它完成：http: //jsfiddle.net/mifi79/LfdL8/2/
回答by Marc Ruef
In CSS3 there is a simple but brilliant hack for that:
在 CSS3 中，有一个简单但出色的技巧：
font-size:calc(12px + 1.5vw);
This is because the static part of calc() defines the minimum. Even though the dynamic part might shrink to something near 0.
这是因为 calc() 的静态部分定义了最小值。即使动态部分可能会缩小到接近 0 的程度。
回答by Stefan Steiger
This is probably not exactly what you want, but in CSS 4, you can use the max-function.
As of mid-December 2019, the CSS4 min/max-function is exactly what you want:
(tread with care, all non-Chromium based browsers don't support it just yet)
这可能不是您想要的，但在 CSS 4 中，您可以使用 max-function。
截至 2019 年 12 月中旬，CSS4 最小/最大函数正是您想要的：（请
谨慎使用，所有非基于 Chromium 的浏览器尚不支持它）
Example:
例子：
blockquote {
font-size: max(1em, 12px);
}
That way the font-size will be 1em (if 1em > 12px), but at least 12px.
这样字体大小将为 1em（如果 1em > 12px），但至少为 12px。
Unfortunatly this awesome CSS3 feature isn't supported by any browsers yet, but I hope this will change soon!
不幸的是，任何浏览器都不支持这个很棒的 CSS3 功能，但我希望这会很快改变！
Edit:
编辑：
As per December 11th 2019, support arrived in Chrome/Chromium 79 (including on Android, and in Android WebView), and as such also in Microsoft Chredge aka Anaheim including Opera 66 and Safari 11.1 (incl. iOS)
截至2019 年 12 月 11 日，Chrome/Chromium 79（包括 Android 和 Android WebView）支持，Microsoft Chredge aka Anaheim 包括 Opera 66 和 Safari 11.1（包括 iOS）
Firefox support is still missing, but Mozilla does already document it:
Firefox 支持仍然缺失，但 Mozilla 已经记录了它：
https://developer.mozilla.org/en-US/docs/Web/CSS/min
https://developer.mozilla.org/en-US/docs/Web/CSS/max
https://developer.mozilla.org/en-US/docs/Web/CSS/min
https://developer.mozilla.org/en-US/docs/Web/CSS/max
Supported as of Firefox v75.
从 Firefox v75 开始支持。
回答by zardilior
Use a media query. Example: This is something im using the original size is 1.0vw but when it hits 1000 the letter gets too small so I scale it up
使用媒体查询。示例：这是我使用的原始大小是 1.0vw 但当它达到 1000 时，字母变得太小，所以我将其放大
@media(max-width:600px){
body,input,textarea{
font-size:2.0vw !important;
}
}
This site I m working on is not responsive for >500px but you might need more. The pro,benefit for this solution is you keep font size scaling without having super mini letters and you can keep it js free.
我正在处理的这个网站对 >500px 没有响应，但您可能需要更多。这个解决方案的优点和好处是你可以在没有超迷你字母的情况下保持字体大小缩放，并且可以保持 js 免费。
回答by ccc
Looks like I'm a bit late but for others with this issue try this code
看起来我有点晚了，但对于其他有此问题的人，请尝试使用此代码
p { font-size: 3vmax; }
use whatever tag you prefer and size you prefer (replace the 3)
使用您喜欢的任何标签和尺寸（替换 3）
p { font-size: 3vmin; }
is used for a max size.
用于最大尺寸。
回答by Syed
CSS Solution:
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
}
}
Just in case if some need scss mixin:
以防万一，如果有些人需要 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;
}
回答by Roko C. Buljan
AFAIK it's not possible with plain CSS,
but you can do a pretty expensive jQuery operation like:
AFAIK 使用纯 CSS 是不可能的，
但是您可以执行非常昂贵的 jQuery 操作，例如：
$('*').css('fontSize', function(i, fs){
if(parseInt(fs, 10) < 12 ) return this.style.fontSize = "12px";
});
Instead of using the Global Selector*I'd suggest you (if possible) to be more specific with your selectors.
我建议您（如果可能）更具体地使用您的选择器，而不是使用全局选择*器。
回答by Bhavik Hirani
CSS has a clamp() function that holds the value between the upper and lower bound. The clamp() function enables the selection of the middle value in the range of values between the defined minimum and maximum values.
CSS 有一个clamp() 函数，用于保存上下限之间的值。使用clamp() 函数可以在定义的最小值和最大值之间的值范围内选择中间值。
It simply takes three dimensions:
它只需要三个维度：
- Minimum value.
- List item
- Preferred value Maximum allowed value.
- 最小值。
- 项目清单
- 首选值 最大允许值。
try with the code below, and check the window resize, which will change the font size you see in the console. i set maximum value 150pxand minimum value 100px.
尝试使用下面的代码，并检查窗口大小调整，这将更改您在控制台中看到的字体大小。我设置了最大值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>回答by Null
The font-min-sizeand font-max-sizeCSS properties were removedfrom the CSS Fonts Module Level 4 specification (and never implemented in browsers AFAIK). And the CSS Working Group replaced the CSS examples with font-size: clamp(...)which doesn't have the greatest browser support yet so we'll have to wait for browsers to support it. See example in https://developer.mozilla.org/en-US/docs/Web/CSS/clamp#Examples.
的font-min-size和font-max-sizeCSS特性进行除去从CSS字体模块4级规格（在浏览器从不AFAIK实现）。并且 CSS 工作组将 CSS 示例替换为font-size: clamp(...)尚无最佳浏览器支持的 CSS 示例，因此我们将不得不等待浏览器支持它。请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/clamp#Examples 中的示例。
回答by Patrick Harrington
Judging by your above comment, you're OK doing this with jQuery — here goes:
从你上面的评论来看，你可以用 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")
});
A cleaner way to do this might be to have a "min-font" class in your CSS that sets font-size: 12px, and just add the class instead:
一种更简洁的方法可能是在您的 CSS 中设置一个“min-font”类来设置 font-size: 12px，然后直接添加该类：
$("*", "body").each(function() {
if ( parseInt($(this).css("font-size"), 10) < 12 )
$(this).addClass("min-font")
});
