CSS 如何实现最大字体大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40528290/
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 implement max-font-size?
提问by Danield
I want to specify my font size using vw, as in
我想使用 指定我的字体大小vw，如
font-size: 3vw;
However, I also want to limit the font size to say 36px. How can I achieve the equivalent of max-font-size, which does not exist--is the only option to use media queries?
但是，我也想将字体大小限制为 36px。我怎样才能实现max-font-size不存在的等效项——是使用媒体查询的唯一选择？
回答by Danield
font-size: 3vw;means that the font size will be 3% of the viewport width. So when the viewport width is 1200px - the font size will be 3% * 1200px = 36px.
font-size: 3vw;意味着字体大小将为视口宽度的 3%。因此，当视口宽度为 1200 像素时，字体大小将为 3% * 1200 像素 = 36 像素。
So a max-font-size of 36px can be easily implemented using a single media query to override the default 3vw font-size value.
因此，可以使用单个媒体查询轻松实现 36px 的最大字体大小以覆盖默认的 3vw 字体大小值。
Codepen demo(Resize Browser)
Codepen 演示（调整浏览器大小）
div {
font-size: 3vw;
}
@media screen and (min-width: 1200px) {
div {
font-size: 36px;
}
}<div>hello</div>Update: With the new CSS min() function, we can simplify the above code - without using media queries (caniuse)
更新：使用新的 CSS min() 函数，我们可以简化上述代码 - 无需使用媒体查询 ( caniuse)
div {
font-size: min(3vw, 36px);
}
In the above example, the font-size will be at most 36px, but will decrease to 3vw if the the viewport is less than 1200px wide (where 3vw computes to a value less than 36px )
在上面的示例中，字体大小最多为 36px，但如果视口宽度小于 1200px（其中 3vw 计算为小于 36px 的值），则字体大小将减小到 3vw
That being said, using viewport units for font-sizein the above way is problematic because when the viewport width is much smaller - say 320px - then the rendered font size will become 0.03 x 320 = 9.6px which is very (too) small.
话虽如此font-size，以上述方式使用视口单位是有问题的，因为当视口宽度小得多 - 例如 320px - 那么渲染的字体大小将变为 0.03 x 320 = 9.6px，这非常（太）小。
In order to overcome this problem, I can recommend using a technique called Fluid TypeAKA CSS Locks.
为了克服这个问题，我可以推荐使用一种称为Fluid TypeAKA CSS Locks 的技术。
A CSS lock is a specific kind of CSS value calculation where:
- there is a minimum value and a maximum value,
- and two breakpoints (usually based on the viewport width),
- and between those breakpoints, the actual value goes linearly from the minimum to the maximum.
CSS 锁是一种特定类型的 CSS 值计算，其中：
- 有一个最小值和一个最大值，
- 和两个断点（通常基于视口宽度），
- 在这些断点之间，实际值从最小值到最大值呈线性变化。
So let's say we want to apply the above technique such that the minimum font-size is 16px at a viewport width of 600px or less, and will increase linearly until it reaches a maximum of 32px at a viewport width of 1200px.
因此，假设我们要应用上述技术，以便在视口宽度为 600 像素或更小的情况下最小字体大小为 16 像素，并且将线性增加，直到在视口宽度为 1200 像素时达到最大 32 像素。
This can be represented as follows (see this CSS-tricks articlefor more details):
这可以表示如下（有关更多详细信息，请参阅此 CSS 技巧文章）：
div {
font-size: 16px;
}
@media screen and (min-width: 600px) {
div {
font-size: calc(16px + 16 * ((100vw - 600px) / 600));
}
}
@media screen and (min-width: 1200px) {
div {
font-size: 32px;
}
}
Alternatively, we could use this SASS mixinwhich does all of the math for us so that the CSS would look something like this:
或者，我们可以使用这个 SASS mixin，它为我们做所有的数学运算，这样 CSS 看起来像这样：
/*
1) Set a min-font-size of 16px when viewport width < 600px
2) Set a max-font-size of 32px when viewport width > 1200px and
3) linearly increase the font-size from 16->32px
between a viewport width of 600px-> 1200px
*/
div {
@include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}
// ----
// libsass (v3.3.6)
// ----
// =========================================================================
//
// PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
// ---------------------------------------------------
// Indrek Paas @indrekpaas
//
// Inspired by Mike Riethmuller's Precise control over responsive typography
//
//
// `strip-unit()` function by Hugo Giraudel
//
// 11.08.2016 Remove redundant `&` self-reference
// 31.03.2016 Remove redundant parenthesis from output
// 02.10.2015 Add support for multiple properties
// 24.04.2015 Initial release
//
// =========================================================================
@function strip-unit($value) {
@return $value / ($value * 0 + 1);
}
@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
@each $property in $properties {
#{$property}: $min-value;
}
@media screen and (min-width: $min-vw) {
@each $property in $properties {
#{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
}
}
@media screen and (min-width: $max-vw) {
@each $property in $properties {
#{$property}: $max-value;
}
}
}
// Usage:
// ======
// /* Single property */
// html {
// @include fluid-type(font-size, 320px, 1366px, 14px, 18px);
// }
// /* Multiple properties with same values */
// h1 {
// @include fluid-type(padding-bottom padding-top, 20em, 70em, 2em, 4em);
// }
////////////////////////////////////////////////////////////////////////////
div {
@include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}
@media screen and (max-width: 600px) {
div {
font-size: 16px;
}
}
@media screen and (min-width: 1200px) {
div {
font-size: 36px;
}
}<div>Responsive Typography technique known as Fluid Type or CSS Locks.
Resize the browser window to see the effect.
</div>Update: We can use the new clamp() CSS function(caniuse) to refactor the above code to simply:
更新：我们可以使用新的clamp() CSS 函数( caniuse) 将上面的代码重构为简单的：
div {
font-size: clamp(16px, 3vw, 32px);
}
see MDN:
见MDN：
clamp() allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size or above a maximum font-size. It has the same effect as the code in Fluid Typography but in one line, and without the use of media queries.
钳位（）允许您设置随视口大小而增长的字体大小，但不会低于最小字体大小或高于最大字体大小。它与 Fluid Typography 中的代码具有相同的效果，但在一行中，并且不使用媒体查询。
p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
<p>
If 2.5vw is less than 1rem, the font-size will be 1rem.
If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem.
Otherwise, it will be 2.5vw.
</p>
--
——
Further Reading
进一步阅读
How Do You Do max-font-size in CSS?
Fluid Responsive Typography With CSS Poly Fluid Sizing
具有 CSS Poly Fluid Sizing 的 Fluid Responsibility Typography
回答by John Henckel
Here is another idea. The calc function uses double precision float. Therefore it exhibits a step function near 1e18. For example,
这是另一个想法。calc 函数使用双精度浮点数。因此它在 1e18 附近表现出阶跃函数。例如，
width: calc(6e18px + 100vw - 6e18px);
This will snap to values 0px, 1024px, 2048px, etc. see pen https://codepen.io/jdhenckel/pen/bQNgyW
这将捕捉到值 0px、1024px、2048px 等。请参阅 pen https://codepen.io/jdhenckel/pen/bQNgyW
The step function can be used to create abs value and min/max with some clever maths. For instance
step 函数可用于通过一些巧妙的数学计算创建绝对值和最小值/最大值。例如
max(x, y) = x - (x + y) * step(y - x)
Given step(z) is zero when z<0 and one otherwise.
当 z<0 时，给定 step(z) 为零，否则为一。
just an idea, not very practical, but maybe fun to try.
只是一个想法，不是很实用，但尝试可能很有趣。
(Caution:this technique depends on an implementation detail that is not in any specification; currently, it works in Chrome and Safari, but not in Firefox, Edge or Internet Explorer, which don't use double-precision floats for CSS values.)
（注意：此技术取决于不在任何规范中的实现细节；目前，它适用于 Chrome 和 Safari，但不适用于 Firefox、Edge 或 Internet Explorer，它们不对 CSS 值使用双精度浮点数。）
回答by ViliusL
Another way increases font size slowly, this will not limit max font size, but even on very wide screens, it will look better. Does not answer question in perfect way, but its 1 line...
另一种方法是缓慢增加字体大小，这不会限制最大字体大小，但即使在非常宽的屏幕上，它也会看起来更好。没有以完美的方式回答问题，但它的 1 行...
font-size: calc(16px + 1vw);
回答by Praveen Kumar Purushothaman
At some point, the font-sizeexceeds the 36pxscale right, find that. Assuming, it exceeds when the width: 2048px:
在某些时候，font-size超出了36px正确的比例，找到那个。假设，它超过时width: 2048px：
@media screen and (min-width: 2048px) {
.selector {
font-size: 36px;
}
}
Yes, unfortunately you need to use the @mediaqueries. I hope that doesn't affect anything.
是的，不幸的是您需要使用@media查询。我希望这不会影响任何事情。
