Html 有没有 min-font-size 和 max-font-size 这样的东西？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23560087/
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
Is there such a thing as min-font-size and max-font-size?
提问by Toby van Kempen
I'm trying to make a font in a div responsive to the browser window. So far, it has worked perfectly, but the parent div has a max-widthof 525px. Resizing the browser further will not make the font stop resizing. This has made me wonder if there is such a thing as min-font-sizeor max-font-size, and if such a thing does not exist, if there is a way to achieve something similar.
我正在尝试在响应浏览器窗口的 div 中制作字体。到目前为止，它已经完美地工作，但父div有一个max-width的525px。进一步调整浏览器大小不会使字体停止调整大小。这让我想知道是否有这样的东西min-font-sizeor max-font-size，如果这样的东西不存在，是否有办法实现类似的东西。
I thought that using percentages at font-sizewould work, but the bit of text won't scale accordingly to the parent div. Here's what I have:
我认为使用百分比 atfont-size会起作用，但文本位不会相应地缩放到父 div。这是我所拥有的：
The CSS for the parent div:
父 div 的 CSS：
.textField{
background-color:rgba(88, 88, 88, 0.33);
width:40%;
height:450px;
min-width:200px;
max-width:525px;
z-index:2;
}
The CSS for the piece of text in question:
相关文本的 CSS：
.subText{
position:relative;
top:-55px;
left:15px;
font-family:"news_gothic";
font-size:1.3vw;
font-size-adjust:auto;
width:90%;
color:white;
z-index:1;
}
I have searched for quite a while on the internet, but to no avail.
我在互联网上搜索了很长时间，但无济于事。
采纳答案by Jukka K. Korpela
No, there is no CSS property for minimum or maximum font size. Browsers often have a setting for minimum font size, but that's under the control of the user, not an author.
不，没有最小或最大字体大小的 CSS 属性。浏览器通常具有最小字体大小的设置，但这是在用户而非作者的控制之下。
You can use @mediaqueriesto make some CSS settings depending on things like screen or window width. In such settings, you can e.g. set the font size to a specific small value if the window is very narrow.
您可以使用@media查询根据屏幕或窗口宽度等内容进行一些 CSS 设置。在此类设置中，例如，如果窗口非常窄，您可以将字体大小设置为特定的小值。
回答by AlmostPitt
You can do it by using a formula and including the viewport width.
您可以通过使用公式并包括视口宽度来实现。
font-size: calc(7px + .5vw);
This sets the minimum font size at 7px and amplifies it by .5vw depending on the viewport width.
这将最小字体大小设置为 7px，并根据视口宽度将其放大 0.5vw。
Good luck!
祝你好运！
回答by Willy VAN INGEN
It works well with CSS.
它适用于 CSS。
I went through the same issues and fixed it as follow.
我遇到了同样的问题并按如下方式修复了它。
Use a fixed "px" size for maximum size at a specific width and above. Then for different smaller widths, use a relative "vw" as a percentage of the screen.
使用固定的“px”大小作为特定宽度及以上的最大尺寸。然后对于不同的较小宽度，使用相对“vw”作为屏幕的百分比。
The result below is that it adjusts itself at screens below 960px but keep a fixed size above. Just a reminder, not to forget to add in the html doc in header:
下面的结果是它在低于 960 像素的屏幕上自行调整，但在上面保持固定大小。只是提醒一下，不要忘记在标题中添加 html 文档：
<meta name="viewport" content="width=device-width">
Example in CSS:
CSS 中的示例：
@media all and (min-width: 960px) {
h1{
font-size: 50px;
}
}
@media all and (max-width: 959px) and (min-width: 600px) {
h1{
font-size: 5vw;
}
}
@media all and (max-width: 599px) and (min-width: 50px) {
h1{
font-size: 6vw;
}
}
I hope it'll help!
我希望它会有所帮助！
回答by Alburkerk
I am coming a bit late here, I don't get that much credit for it, I am just doing a mix of the answers below because I was forced to do that for a project.
我来得有点晚了，我没有得到那么多功劳，我只是混合了下面的答案，因为我被迫为一个项目这样做。
So to answer the question : There is no such thing as this CSS property. I don't know why, but I think it's because they are afraid of a misused of this property, but I don't find any use case where it can be a serious problem.
所以回答这个问题：没有这个 CSS 属性这样的东西。我不知道为什么，但我认为这是因为他们害怕滥用此属性，但我没有找到任何可能成为严重问题的用例。
Whatever, what are the solutions ?
不管怎样，有什么解决办法？
Two tools will allow us to do that : media queriesans vw property
1) There is a "fool" solution consisting in making a media query for every step we eant in our css, changing font from a fixed amount to another fixed amount. It works, but it is very boring to do, and you don't have a smooth linear aspect.
1）有一个“傻瓜”解决方案，包括为我们在 css 中执行的每个步骤进行媒体查询，将字体从固定数量更改为另一个固定数量。它有效，但做起来很无聊，而且你没有平滑的线性方面。
2) As AlmostPitt explained, there is a brillant solution for the minima :
2）正如AlmostPitt解释的那样，最小值有一个出色的解决方案：
font-size: calc(7px + .5vw);
Minimum here would be 7px in addition to 0.5% of the view width. That is already really cool and working in most of cases. It does not require any media query, you just have to spend some time finding the right parameters.
除了视图宽度的 0.5% 之外，此处的最小值为 7px。 这已经非常酷并且在大多数情况下都有效。它不需要任何媒体查询，您只需要花一些时间找到正确的参数。
As you noticed it is a linear function, basic maths learn you that two points already find you the parameters. Then just fix the font-size in px you want for very large screens and for mobile version, then calculate if you want to do a scientific method. Thought, it is absolutely not necessary and you can just go by trying.
正如您注意到它是一个线性函数，基础数学告诉您两点已经找到了您的参数。然后只需修复超大屏幕和移动版本所需的 px 字体大小，然后计算是否要采用科学方法。想了想，完全没有必要，你可以试试。
3) Let's suppose you have a very boring client (like me) who absolutely wants a title to be one line and no more. If you used AlmostPitt solution, then you are in trouble because your font will keep growing, and if you have a fixed width container (like bootstrap stoping at 1140px or something in large windows). Here I suggest you to use also a media query. In fact you can just find the amout of px size maximum you can handle in your container before the aspect become unwanted (pxMax). This will be your maximum. Then you just have to find the exact screen width you must stop (wMax). (I let you inverse a linear function on your own).
3) 假设您有一个非常无聊的客户（如我），他绝对希望标题是一行而不是更多。如果您使用了AlmostPitt 解决方案，那么您就会遇到麻烦，因为您的字体会不断增长，并且如果您有一个固定宽度的容器（例如引导程序停止在 1140 像素或大窗口中的某些内容）。在这里，我建议您也使用媒体查询。事实上，您可以在方面变得不需要之前（pxMax）找到您可以在容器中处理的最大像素大小。这将是您的最大值。然后你只需要找到你必须停止的确切屏幕宽度（wMax）。（我让你自己对一个线性函数求逆）。
After that just do
之后就做
@media (min-width: [wMax]px) {
h2{
font-size: [pxMax]px;
}
}
Then it is perfectly linearand your font-size stop growing ! Notice that you don't need to put your previous css property (calc...) in a media query under wMax because media query are considered as more imnportant and it will overwrite the previous property.
然后它是完美的线性并且您的字体大小停止增长！请注意，您不需要将之前的 css 属性 (calc...) 放在 wMax 下的媒体查询中，因为媒体查询被认为更重要，它会覆盖之前的属性。
I don't think it is useful to make a snippet for this, as you would have trouble to make it to whole screen and it is not rocket science afterall.
我认为为此制作一个片段没有用，因为您很难将其显示在整个屏幕上，而且毕竟这不是火箭科学。
Hope this could help others, and don't forget to thank AlmostPitt for his solution.
希望这可以帮助其他人，不要忘记感谢AlmostPitt的解决方案。
回答by roberrrt-s
This is actually being proposed in CSS4
这实际上是在 CSS4 中提出的
Quote:
引用：
These two properties allow a website or user to require an element's font size to be clamped within the range supplied with these two properties. If the computed value font-size is outside the bounds created by font-min-size and font-max-size, the use value of font-size is clamped to the values specified in these two properties.
这两个属性允许网站或用户要求将元素的字体大小限制在这两个属性提供的范围内。如果计算值 font-size 超出 font-min-size 和 font-max-size 创建的边界，则 font-size 的使用值将被限制为这两个属性中指定的值。
This would actually work as following:
这实际上将如下工作：
.element {
font-min-size: 10px;
font-max-size: 18px;
font-size: 5vw; // viewport-relative units are responsive.
}
This would literally mean, the font size will be 5% of the viewport's width, but never smaller than 10 pixels, and never larger than 18 pixels.
这实际上意味着，字体大小将是视口宽度的 5%，但永远不会小于 10 像素，也永远不会大于 18 像素。
Unfortunately, this feature isn't implemented anywhere yet, (not even on caniuse.com).
不幸的是，这个功能还没有在任何地方实现，（甚至在 caniuse.com 上也没有）。
回答by Dannie Vinther
Rucksack is brilliant, but you don't necessarily have to resort to build tools like Gulp or Grunt etc.
Rucksack 很棒，但你不一定非得求助于构建 Gulp 或 Grunt 等工具。
I made a demousing CSS Custom Properties (CSS Variables) to easily control the min and max font sizes.
我使用 CSS 自定义属性（CSS 变量）制作了一个演示，以轻松控制最小和最大字体大小。
Like so:
像这样：
* {
/* Calculation */
--diff: calc(var(--max-size) - var(--min-size));
--responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}
h1 {
--max-size: 50;
--min-size: 25;
font-size: var(--responsive);
}
h2 {
--max-size: 40;
--min-size: 20;
font-size: var(--responsive);
}
回答by matthew
You can use Sass to control min and max font sizes. Here is a brilliant solution by Eduardo Boucas.
您可以使用 Sass 来控制最小和最大字体大小。这是 Eduardo Boucas 的绝妙解决方案。
@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;
}
.limit-min {
@include responsive-font(3vw, 20px);
}
.limit-min-max {
@include responsive-font(3vw, 20px, 50px);
}
回答by Chris Topillogical
I got some smooth results with these. It flows smoothly between the 3 width ranges, like a continuous piecewise function.
我得到了一些顺利的结果。它在 3 个宽度范围之间平稳流动，就像一个连续的分段函数。
@media screen and (min-width: 581px) and (max-width: 1760px){
#expandingHeader {
line-height:5.2vw;
font-size: 5.99vw;
}
#tagLine {
letter-spacing: .15vw;
font-size: 1.7vw;
line-height:1.0vw;
}
}
@media screen and (min-width: 1761px){
#expandingHeader {
line-height:.9em;
font-size: 7.03em;
}
#tagLine {
letter-spacing: .15vw;
font-size: 1.7vw;
line-height:1.0vw;
}
}
@media screen and (max-width: 580px){
#expandingHeader {
line-height:.9em;
font-size: 2.3em;
}
#tagLine {
letter-spacing: .1em;
font-size: .65em;
line-height: .10em;
}
}
回答by DepecheCode
Please note that setting font-sizing with px is not recommended due to accessibility concerns:
请注意，由于可访问性问题，不建议使用 px设置字体大小：
"defining font sizes in px is not accessible, because the user cannot change the font size in some browsers. For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer." (see https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)
“在 px 中定义字体大小是不可访问的，因为用户无法在某些浏览器中更改字体大小。例如，视力有限的用户可能希望将字体大小设置为远大于网页设计师选择的大小。” （参见https://developer.mozilla.org/en-US/docs/Web/CSS/font-size）
A more accessible approach is to set font-size: 100%in the html, which respects user default size settings, and THEN using either percentages or relative units when resizing (emor rem), for example with a @media query.
一种更易于访问的方法是font-size: 100%在 html 中进行设置，它尊重用户默认大小设置，然后在调整大小 (em或rem)时使用百分比或相对单位，例如使用@media 查询。
(see https://betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography/)
（参见https://betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography/）
回答by Padina
Yes, there seems some restrictions by some browser in SVG. The developertool restrict it to 8000px; The following dynamically generated Chart fails for example in Chrome.
是的，SVG 中的某些浏览器似乎有一些限制。developertool 将其限制为 8000px；例如，以下动态生成的图表在 Chrome 中失败。
Try http://www.xn--dddelei-n2a.de/2018/test-von-svt/
试试http://www.xn--dddelei-n2a.de/2018/test-von-svt/
<svg id="diagrammChart"
width="100%"
height="100%"
viewBox="-400000 0 1000000 550000"
font-size="27559"
overflow="hidden"
preserveAspectRatio="xMidYMid meet"
>
<g class="hover-check">
<text class="hover-toggle" x="-16800" y="36857.506818182" opacity="1" height="24390.997159091" width="953959" font-size="27559">
<set attributeName="opacity" to="1" begin="ExampShow56TestBarRect1.touchstart"
end="ExampShow56TestBarRect1.touchend">
</set>
<set attributeName="opacity" to="1" begin="ExampShow56TestBarRect1.mouseover"
end="ExampShow56TestBarRect1.mouseout">
</set>
Heinz: -16800
</text>
<rect class="hover-rect" x="-16800" y="12466.509659091" width="16800" height="24390.997159091" fill="darkred">
<set attributeName="opacity" to="0.1" begin="ExampShow56TestBarRect1.mouseover"
end="ExampShow56TestBarRect1.mouseout">
</set>
<set attributeName="opacity" to="0.1" begin="ExampShow56TestBarRect1.touchstart"
end="ExampShow56TestBarRect1.touchend">
</set>
</rect>
<rect id="ExampShow56TestBarRect1" x="-384261" y="0" width="953959" height="48781.994318182"
opacity="0">
</rect>
</g>
</svg>
