具有`calc()`，CSS单位和数学

Question

我很难理解字体缩放。

我目前this site的正文font-size为100％。但是100％的是什么？这似乎计算在16px。

我的印象是，100％会以某种方式引用浏览器窗口的大小，但显然不是因为它总是16px，无论窗口是否调整为移动宽度或完整的宽屏桌面。

如何使我的网站上的文字与其容器相关？我尝试使用em，但这也没有扩展。

我的理由是，当你调整大小时，我的菜单之类的东西会变得模糊，所以我需要减少与font-size的px .menuItem以及与容器宽度相关的其他元素。（例如，在大型桌面上的菜单中，22px工作正常。向下移动到平板电脑宽度，16px更合适。）

我知道我可以添加断点，但我真的希望文本可以扩展为具有额外的断点，否则我将最终为每100px宽度减少数百个断点来控制文本。

Answer 1

编辑：如果容器不是正文 CSS技巧涵盖了您的所有选项：https://css-tricks.com/fitting-text-to-a-container/

如果容器是正文，那么您要找的是Viewport-percentage lengths：

视口百分比长度相对于initial containing block的大小。当初始包含块的高度或宽度改变时，它们相应地缩放。但是，当根元素上的溢出值为auto时，假定不存在任何滚动条。

值为：

vw（视口宽度的百分比）
vh（视口高度的百分比）
vi（根元素内联轴方向视口大小的1％）
vb（根元素块轴方向视口大小的1％）
vmin（vw或vh中的较小者）
vmax（较大或vw或vh）

1 v *等于初始包含块的1％。

使用它看起来像这样：

p {
    font-size: 4vw;
}

如您所见，当视口宽度增加时，font-size也会增加，而无需使用媒体查询。

这些值是一个大小调整单位，就像px或em一样，因此它们也可用于调整其他元素的大小，例如宽度，边距或填充。

浏览器支持非常好，但您可能需要回退，例如：

p {
    font-size: 16px; 
    font-size: 4vw;
}

查看支持统计信息：http://caniuse.com/#feat=viewport-units。

另外，请查看CSS-Tricks以获得更广泛的外观：http://css-tricks.com/viewport-sized-typography/

这是一篇很好的文章，关于设置最小/最大尺寸并对尺寸进行更多控制：http://madebymike.com.au/writing/precise-control-responsive-typography/

这里有一篇关于使用calc（）设置大小的文章，以便文本填充视口：http://codepen.io/CrocoDillon/pen/fBJxu

另外，请查看这篇文章，该文章使用了一种名为“熔化前导”的技术来调整线高。 https://css-tricks.com/molten-leading-css/

Answer 2

但是如果容器不是视口（正文）怎么办？

Alex在接受的答案中对此问题进行了评论。

这一事实并不意味着vw在某种程度上不能用于该容器的大小。现在要看到任何变化都必须假设容器在某种程度上是灵活的。是通过直接百分比width还是通过100％减去利润。如果容器始终设置为200px宽，则该点变得“没有实际意义” - 然后只需设置适用于该宽度的font-size。

示例1

但是，对于灵活宽度的容器，必须意识到容器 在某种程度上仍然在视口 之外。因此，需要根据与视口的百分比大小差异来调整vw设置，这意味着要考虑父包装的大小。 Take this example：

div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = viewport width, as 1vw = 1/100th of that
       So if the container is 50% of viewport (as here)
       then factor that into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
    */
    font-size: 2.5vw; 
}

假设此处div是body的子项，则50%宽度为100%，这是此基本情况下的视口大小。基本上，您想要设置一个对您来说很好看的vw。正如您在上面的css中的评论中所看到的，您可以通过数学方式“思考”整个视口大小，但您不需要来做到这一点。文本将与容器“flex”，因为容器在视口大小调整时弯曲。更新：here's an example of two differently sized containers。

示例2

您可以通过强制执行基于此计算的计算来帮助确保视口大小调整。 Consider this example：

html {width: 100%;} /* force html to be viewport width */
body {width: 150%; } /* overflow the body */

div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = viewport width, as 1vw = 1/100th of that
       Here, the body is 150% of viewport, but the container is 50% 
       of viewport, so both parents factor  into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 3.75vw 
       (5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
    */
    font-size: 3.75vw; 
}

大小调整仍然基于视口，但基本上是根据容器大小本身设置的。

应该动态改变容器的大小......

如果容器元素的大小最终通过@media断点或通过javascript动态改变其百分比关系，则无论基础“目标”是什么，都需要重新计算以保持文本大小调整的相同“关系”

以上面的例子＃1为例。如果div被25%或javascript切换为@media宽度，那么font-size需要在媒体查询或javascript中进行调整到5vw * .25 = 1.25的新计算。这将使文本大小与原始50%容器的“宽度”从视口大小减少一半时的大小相同，但现在由于其自身百分比计算的变化而减少。

挑战

如果使用the CSS3 calc() function，则动态调整将变得困难，因为此功能目前不适用于font-size目的。因此，如果宽度在calc()上发生变化，则无法进行纯CSS3调整。当然，对边距宽度的微小调整可能不足以保证font-size的任何变化，因此可能无关紧要。

Answer 3

使用SVG解决方案：

rails g migration AddStatusToTasks status:references

https://jsfiddle.net/qc8ht5eb/

使用<div style="width: 60px;"> <svg width="100%" height="100%" viewBox="0 -200 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text font-size="300" fill="black">Text</text> </svg> </div>进行SVG和文本换行的解决方案：

foreignObject

https://jsfiddle.net/2rp1q0sy/

Answer 4

我在其中一个项目中所做的是＆＃34;混合物＆＃34;在vw和vh之间根据我的需要调整字体大小，例如：

font-size: calc(3vw + 3vh);

我知道这并没有回答该问题，但也许它可以解决其他任何人。

Answer 5

这个问题有一个很大的哲学。最简单的做法是给身体一个字体大小（我推荐10），然后所有其他元素的字体都在em或rem中。我会举例说明这些单位。 Em始终与父母相关

body{font-size:10px;}
.menu{font-size:2em;} /* that means 2*10px = 20px */
.menu li{font-size:1.5em;} /* that means 1.5*20px = 30px */

Rem总是相对于身体

body{font-size:10px;}
.menu{font-size:2rem;} /* that means 2*10px = 20px */
.menu li{font-size:1.5rem;} /* that means 1.5*10px = 15px */

并且您可以创建一个相对于容器宽度修改字体大小的脚本。但这不是我想要的。因为在一个900像素宽的容器中，你会有一个p元素，其字体大小为12px。并且在你的ideea上将成为300px宽度容器，4px字体大小。必须有一个下限。另一种解决方案是使用媒体查询，以便您可以设置不同宽度的字体。

但我建议的解决方案是使用一个javascript库来帮助你。到目前为止我发现了fittext.js。

Answer 6

更新，因为我投了一票。

这是功能：

document.body.setScaledFont = function(f) {
  var s = this.offsetWidth, fs = s * f;
  this.style.fontSize = fs + '%';
  return this
};

然后将所有文档子元素字体大小转换为em或％。

然后在代码中添加这样的内容以设置基本字体大小。

document.body.setScaledFont(0.35);
window.onresize = function() {
    document.body.setScaledFont(0.35);
}

http://jsfiddle.net/0tpvccjt/

Answer 7

具有`calc()`，CSS单位和数学

的纯CSS解决方案

这正是OP所要求的，但可能会成为某人的一天。这个答案并非易于使用，需要在开发人员端进行一些研究。

我终于使用具有不同单位的calc()来获得纯CSS解决方案。您需要对公式进行一些基本的数学理解，才能计算出calc()的表达式。

当我解决这个问题时，我必须得到一个整页宽度的响应式标题，并在DOM中填充少量父母。我会在这里使用我的值，用你自己的值替换它们。

数学

您将需要：

在一些视口中调整好的比例，我使用320px，因此我得到24px高和224px宽，所以比率是9.333 ...或28/3
容器宽度，我有padding: 3em和全宽，所以这得到100wv - 2 * 3em

X是容器的宽度，因此请将其替换为您自己的表达式，或者调整该值以获取整页文本。 R是你将拥有的比率。您可以通过调整某些视口中的值，检查元素宽度和高度并使用您自己的值替换它们来获取它。此外，它是width / heigth;）

x = 100vw - 2 * 3em = 100vw - 6em
r = 224px/24px = 9.333... = 28 / 3

y = x / r
  = (100vw - 6em) / (28 / 3)
  = (100vw - 6em) * 3 / 28
  = (300vw - 18em) / 28
  = (75vw - 4.5rem) / 7

砰！有效！我写了

font-size: calc((75vw - 4.5rem) / 7)

到我的标题，并在每个视口中调整得很好。

但它是如何运作的？

我们需要一些常数。 100vw表示视口的整个宽度，我的目标是使用一些填充建立全宽标题。

比率。在一个视口中获得宽度和高度让我得到一个比率，并且我知道在其他视口宽度中的高度应该是多少。用手计算它们需要花费大量的时间，至少需要大量的带宽，所以它不是一个好的答案。

结论

我想知道为什么没有人想到这一点，有些人甚至说这不可能修补CSS。我不想在调整元素时使用Javascript，所以我不接受JS甚至jQuery的答案而不需要更多。总而言之，这很好解决了这个问题，这是网站设计中纯CSS实现的一个步骤。

我为文中任何不寻常的约定道歉，我不是英语母语，也不是写SO答案的新手。

编辑：还应注意我们在某些浏览器中有邪恶的滚动条。例如，在使用Firefox时，我注意到100vw表示视口的整个宽度，在滚动条下扩展（内容无法展开！），因此必须仔细地对全文文本进行边距处理，最好使用许多浏览器和设备进行测试

Answer 8

有一种方法可以在没有javascript的情况下执行此操作！

您可以使用内联svg。如果它是内联的，你可以在svg上使用css。您必须记住，使用此方法意味着您的svg将响应其容器大小。

尝试使用以下解决方案......

HTML

<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.96 358.98" >
      <text>SAVE $500</text>

  </svg>

</div>

CSS

div {
  width: 50%; /* set your container width */
  height: 50%; /* Set your container height */

}

svg {
  width: 100%;
  height: auto;

}

text {
  transform: translate(40px, 202px);
  font-size: 62px;
  fill: #000;

}

例如： https://jsfiddle.net/k8L4xLLa/32/

想要更华丽的东西吗？

SVG还允许你用形状和垃圾做很酷的东西。查看这个可扩展文本的大用例...

https://jsfiddle.net/k8L4xLLa/14/

Answer 9

这可能不太实用，但是如果你想让font成为父类的直接函数，而没有任何JS监听/循环（interval）来读取div / page的大小，那么有一种方法可以做到这一点。 I帧。 iframe中的任何内容都会将iframe的大小视为视口的大小。因此，诀窍是只创建一个iframe，其宽度是您希望文本的最大宽度，其高度等于特定文本的纵横比的最大高度*。

除了视口单元不能同时出现文本的旁边父单元（例如，％大小的行为与其他人一样），视口单元确实提供了一个非常强大的工具：能够获得最小值/ max dimension。你不能在其他任何地方做到这一点 - 你不能说..使这个div的高度成为父*的宽度。

话虽如此，诀窍是使用vmin，并设置iframe大小，以便当高度是限制尺寸时，[fraction] *总高度是一个好的字体大小，而[fraction] *总宽度是宽度是限制尺寸。这就是为什么高度必须是宽度和纵横比的乘积。

对于我的特定示例，您有

.main iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: calc(3.5 * 100%);
  background: rgba(0,0,0,0);
  border-style: none;
  transform: translate3d(-50%,-50%,0);
}

使用此方法的小麻烦是您必须手动设置iframe的CSS。如果附加整个CSS文件，则会占用许多文本区域的大量带宽。所以，我所做的是直接从我的CSS附加我想要的规则。

var rule = document.styleSheets[1].rules[4];
var iDoc = document.querySelector('iframe').contentDocument;
iDoc.styleSheets[0].insertRule(rule.cssText);

您可以编写小函数来获取可能影响文本区域的CSS规则/所有CSS规则。

如果没有一些骑车/听力的JS，我想不出另一种方法。真正的解决方案是让浏览器提供一种方法来缩放文本作为父容器的函数，并提供相同的vmin / vmax类型功能。

JS小提琴： https://jsfiddle.net/0jr7rrgm/3/ （单击一次将红色方块锁定到鼠标，再次单击以释放）

小提琴中的大多数JS只是我的自定义点击拖动功能

Answer 10

使用vw，em＆amp;合。确实很有效，但我总是需要一个人的触摸来进行微调。

这是我刚刚根据@ tnt-rox'answer编写的一个脚本，试图自动化人类的触摸：

$('#controller').click(function(){
	$('h2').each(function(){
    var
      $el = $(this),
      max = $el.get(0),
      el = null
    ;
    max =
      max
    ? max.offsetWidth
    : 320
    ;
    $el.css({
      'font-size': '1em',
      'display': 'inline',
    });
    el = $el.get(0);

    el.get_float = function(){
      var
        fs = 0
      ;
      if (this.style && this.style.fontSize) {
        fs = parseFloat(this.style.fontSize.replace( /([\d\.]+)em/g, '$1' ));
      }
      return fs;
    };

    el.bigger = function(){
      this.style.fontSize = (this.get_float() +0.1) +'em';
    };


    while ( el.offsetWidth < max ) {
      el.bigger();
    }
    // finishing touch.
    $el.css({
      'font-size': ((el.get_float() -0.1) +'em'),
      'line-height': 'normal',
      'display': '',
    });
	});  // end of ( each )
});	// end of ( font scaling test )

div {
  width: 50%;
  background-color: tomato;
  font-family: 'Arial';
}

h2 {
  white-space: nowrap;
}

h2:nth-child(2) {
  font-style: italic;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" id="controller" value="Apply" />
<div>
  <h2>Lorem ipsum dolor</h2>
  <h2>Test String</h2>
  <h2>Sweet Concatenation</h2>
  <h2>Font Scaling</h2>
</div>

它基本上将字体大小减小到1em，然后开始递增0.1，直到达到最大宽度。

jsFiddle

Answer 11

在CSS内部尝试在底部添加此项，在设计开始破坏的地方更改320px宽度：

    @media only screen and (max-width: 320px) {

       body { font-size: 1em; }

    }

然后根据需要在“px”或“em”中给出font-size。

Answer 12

100％是相对于基本字体大小的，如果您没有设置它，那么它将是浏览器的用户代理默认值。

为了获得效果，我将使用一段javascript来调整相对于窗口尺寸的基本字体大小。

Answer 13

This web component更改字体大小，使内部文本宽度与容器宽度匹配。查看demo。

你可以像这样使用它：

<full-width-text>Lorem Ipsum</full-width-text>

Answer 14

我自己的解决方案，基于jQuery，通过逐渐增加字体大小来工作，直到容器的高度大幅增加（意味着它有一个换行符）。它很简单，但工作得很好，而且非常容易使用。您不必了解所使用的字体，浏览器会处理所有内容。

您可以在http://jsfiddle.net/tubededentifrice/u5y15d0L/2/

上玩它

魔术发生在这里：

var setMaxTextSize=function(jElement) {
    //Get and set the font size into data for reuse upon resize
    var fontSize=parseInt(jElement.data(quickFitFontSizeData)) || parseInt(jElement.css("font-size"));
    jElement.data(quickFitFontSizeData,fontSize);

    //Gradually increase font size until the element gets a big increase in height (ie line break)
    var i=0;
    var previousHeight;
    do
    {
        previousHeight=jElement.height();
        jElement.css("font-size",""+(++fontSize)+"px");
    }
    while(i++<300 && jElement.height()-previousHeight<fontSize/2)

    //Finally, go back before the increase in height and set the element as resized by adding quickFitSetClass
    fontSize-=1;
    jElement.addClass(quickFitSetClass).css("font-size",""+fontSize+"px");

    return fontSize;
};

Answer 15

你正在寻找这样的东西吗？ =＆GT;
http://jsfiddle.net/sijav/dGsC9/4/
http://fiddle.jshell.net/sijav/dGsC9/4/show/
我使用flowtype并且它工作得很好（不过它是js而不是纯css解决方案）

$('body').flowtype({
 minFont : 10,
 maxFont : 40,
 minimum : 500,
 maximum : 1200,
 fontRatio : 70
});

Answer 16

您是否尝试过http://simplefocus.com/flowtype/？

这是我用于我的网站并且完美运行的。希望它有所帮助。

Answer 17

我的问题很相似，但与标题中的缩放文字有关。我尝试了Fit Font，但我需要切换压缩器以获得任何结果，因为它解决了一个稍微不同的问题，就像Text Flow一样。所以我编写了自己的小插件，减少了字体大小以适应容器，假设你有overflow: hidden和white-space: nowrap，这样即使将字体缩小到最小也不允许显示完整的标题，它只是切断了它可以显示的东西。

(function($) {

  // Reduces the size of text in the element to fit the parent.
  $.fn.reduceTextSize = function(options) {
    options = $.extend({
      minFontSize: 10
    }, options);

    function checkWidth(em) {
      var $em = $(em);
      var oldPosition = $em.css('position');
      $em.css('position', 'absolute');
      var width = $em.width();
      $em.css('position', oldPosition);
      return width;
    }

    return this.each(function(){
      var $this = $(this);
      var $parent = $this.parent();
      var prevFontSize;
      while (checkWidth($this) > $parent.width()) {
        var currentFontSize = parseInt($this.css('font-size').replace('px', ''));
        // Stop looping if min font size reached, or font size did not change last iteration.
        if (isNaN(currentFontSize) || currentFontSize <= options.minFontSize ||
            prevFontSize && prevFontSize == currentFontSize) {
          break;
        }
        prevFontSize = currentFontSize;
        $this.css('font-size', (currentFontSize - 1) + 'px');
      }
    });

  };

})(jQuery);

Answer 18

我已经使用css变换而不是font-size准备了简单的缩放功能。您可以在任何容器内使用它，也不必设置媒体查询等等。）

博文： https://blog.polarbits.co/2017/03/07/full-width-css-js-scalable-header/

代码：

function scaleHeader() {
  var scalable = document.querySelectorAll('.scale--js');
  var margin = 10;
  for (var i = 0; i < scalable.length; i++) {
    var scalableContainer = scalable[i].parentNode;
    scalable[i].style.transform = 'scale(1)';
    var scalableContainerWidth = scalableContainer.offsetWidth - margin;
    var scalableWidth = scalable[i].offsetWidth;
    scalable[i].style.transform = 'scale(' + scalableContainerWidth / scalableWidth + ')';
    scalableContainer.style.height = scalable[i].getBoundingClientRect().height + 'px';
  }
}

工作演示： https://codepen.io/maciejkorsan/pen/BWLryj

Answer 19

看看我的代码，它使font size smaller到fit无论

但我认为这并没有带来良好的用户体验

var containerWidth = $("#ui-id-2").width();
var items = $(".quickSearchAutocomplete .ui-menu-item");
var fontSize = 16;

items.each(function(){
    //display value depend sometimes on your case you may make it block or inline-table instead of inline-block or whatever value that make the div take overflow width
    $(this).css({"whiteSpace":"nowrap","display":"inline-block"});
    while ($(this).width() > containerWidth){
         console.log("$(this).width()"+ $(this).width() + "containerWidth" + containerWidth)
         $(this).css("font-size", fontSize -= 0.5);
    }
});

希望这能帮到你

Answer 20

尝试使用fitText插件，因为Viewport大小不是此问题的解决方案。只需添加库

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="jquery.fittext.js"></script>

并通过设置文本系数来更改字体大小：

$("#text_div").fitText(0.8);

您可以设置文字的最大值和最小值：

$("#text_div").fitText(0.8, { minFontSize: '12px', maxFontSize: '36px' });

Answer 21

使用CSS变量

还没有人提到CSS变量，这种方法对我来说效果最好，所以：

假设您的页面上有一列是移动用户屏幕宽度的100％，但max-width为800像素，因此在桌面上，该列的两侧都有一些空间。将其放在页面顶部：

<script> document.documentElement.style.setProperty('--column-width', Math.min(window.innerWidth, 800)+'px'); </script>

现在您可以使用该变量（而不是内置的vw单位）来设置字体大小。例如

p {
  font-size: calc( var(--column-width) / 100 );
}

这不是 pure CSS方法，但非常接近。

Answer 22

这对我有用：

我根据设置font-size：10px得到的宽度/高度来尝试近似字体大小。基本上这个想法是“如果我有20px宽度和11px高度，字体大小：10px，那么数学容量为50px宽度和30px高度的容器的最大字体大小是什么？”

答案是双重比例系统：

{20：10 = 50：X，11：10 = 30：Y} = {X =（10 * 50）/ 20，Y =（10 * 30）/ 11}

现在X是与宽度匹配的字体大小，Y是与高度匹配的字体大小;取最小值

function getMaxFontSizeApprox(el){
    var fontSize = 10;
    var p = el.parentNode;

    var parent_h = p.offsetHeight ? p.offsetHeight : p.style.pixelHeight;
    if(!parent_h)parent_h = 0;

    var parent_w = p.offsetHeight ? p.offsetWidth : p.style.pixelWidth;
    if(!parent_w)parent_w = 0;

    el.style.fontSize = fontSize + "px";

    var el_h = el.offsetHeight ? el.offsetHeight : el.style.pixelHeight;
    if(!el_h)el_h = 0;

    var el_w = el.offsetHeight ? el.offsetWidth : el.style.pixelWidth;
    if(!el_w)el_w = 0;

    //0.5 is the error on the measure that js does
    //if real measure had been 12.49 px => js would have said 12px
    //so we think about the worst case when could have, we add 0.5 to 
    //compensate the round error
    var fs1 = (fontSize*(parent_w + 0.5))/(el_w + 0.5);
    var fs2 = (fontSize*(parent_h) + 0.5)/(el_h + 0.5);

    fontSize = Math.floor(Math.min(fs1,fs2));
    el.style.fontSize = fontSize + "px";
    return fontSize;
}

注意：函数的参数必须是span元素或小于它的父元素的元素，否则如果子元素和父元素具有相同的宽度/高度函数将失败

Answer 23

作为JavaScript后备（或您唯一的解决方案），您可以使用我的jQuery Scalem plugin，它允许您通过传递reference选项来相对于父元素（容器）进行缩放。

Answer 24

对于动态文本，此插件非常有用http://freqdec.github.io/slabText/。只需添加css

即可

.slabtexted .slabtext
    {
    display: -moz-inline-box;
    display: inline-block;
    white-space: nowrap;
    }
.slabtextinactive .slabtext
    {
    display: inline;
    white-space: normal;
    font-size: 1em !important;
    letter-spacing: inherit !important;
    word-spacing: inherit !important;
    *letter-spacing: normal !important;
    *word-spacing: normal !important;
    }
.slabtextdone .slabtext
    {
    display: block;
    }

和脚本

$('#mydiv').slabText();

Answer 25

如果它对任何人都有帮助，那么这个主题中的大多数解决方案都是将文本包装成多行，形式为e。

但后来我找到了这个，它起作用了：

https://github.com/chunksnbits/jquery-quickfit

使用示例：

Update Check

Answer 26

始终使用此属性元素：

Javascript：/someDir/com/foo/bar/

或

CSS：element.style.fontSize = "100%";

当您全屏显示时，您应该已经计算了比例变量（比例＆gt; 1或比例= 1）。然后，全屏：

style = "font-size: 100%;"

它很好地处理很少的代码。

Answer 27

为了使font-size适合其容器，而不是窗口，请参阅我在此问题中共享的resizeFont()函数（其他答案的组合，其中大部分已在此处链接）。它是使用window.addEventListener('resize', resizeFont);触发的。

Vanilla JS: Resize font-awesome to fit container

JS：

function resizeFont() {
  var elements  = document.getElementsByClassName('resize');
  console.log(elements);
  if (elements.length < 0) {
    return;
  }
  _len = elements.length;
  for (_i = 0; _i < _len; _i++) {
    var el = elements[_i];
    el.style.fontSize = "100%";
    for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) {
      el.style.fontSize = size + '%';
    }
  }
}

您可以使用vw / vh作为后备，因此您可以使用javascript动态分配em或rem单位，确保在禁用javascript时字体会缩放到窗口。

将.resize类应用于包含您希望缩放的文本的所有元素。

在添加window resize事件侦听器之前触发该函数。然后，当页面加载时以及调整页面大小时，任何不适合其容器的文本都将缩小。

注意：默认font-size必须设置为em，rem或%才能获得正常结果。

Answer 28

我没有看到关于CSS flex属性的任何答案，但是它也可能非常有用。

Answer 29

HTML

<div style="height:100px; width:200px;">
  <div id='qwe'>
    test
  </div>
</div>

用于最大化字体大小的JavaScript代码：

var fontSize, maxHeight, maxWidth, textElement, parentElement;
textElement = document.getElementById('qwe');
parentElement = textElement.parentElement;    
maxHeight = parentElement.clientHeight;
maxWidth = parentElement.clientWidth;
fontSize = maxHeight;
var minFS = 3, maxFS = fontSize;
while (fontSize != minFS) {
  textElement.style.fontSize = `${fontSize}px`;
  if (textElement.offsetHeight < maxHeight && textElement.offsetWidth <= maxWidth) {
    minFS = fontSize;
  } else{
    maxFS = fontSize;
  }
  fontSize = Math.floor((minFS + maxFS)/2);
}
textElement.style.fontSize = `${minFS}px`;

Answer 30

简化媒体查询似乎是一种基于可能是动态的容器大小来调整字体大小的简单得多且易于理解的解决方案。

下面的内容将字体调整为容器的大小，无论是将容器缩放为视口的大小，还是达到其最大值。如果您有非100％宽的容器，则可以相应地调整vw。

.container {
    width: 100%;
    max-width: 600px;
}
.headline {
    font-size: 20vw;
}
.subhead {
    font-size: 5vw;
}
@media (min-width:600px) {
    .headline {
        font-size: 120px;
    }
    .subhead {
        font-size: 32px;
    }
}

Answer 31

但是，如果容器不是视口（正文）怎么办？

真正的答案是在 transform属性中，它使您可以通过倾斜，旋转，平移或缩放来直观地操作元素：

https://css-tricks.com/almanac/properties/t/transform/

Answer 32

从艺术上讲，如果您需要在同一宽度内容纳两行或更多行文本，而不管其字符数如何，那么您就有不错的选择。

最好找到一个动态的解决方案，这样无论输入什么文本，我们最终都能得到漂亮的显示。

让我们看看如何应对。

var els     = document.querySelectorAll(".divtext"),
refWidth    = els[0].clientWidth,
refFontSize = parseFloat(window.getComputedStyle(els[0],null)
                               .getPropertyValue("font-size"));

els.forEach((el,i) => el.style.fontSize = refFontSize * refWidth / els[i].clientWidth + "px")

#container {
  display: inline-block;
  background-color: black;
  padding: 0.6vw 1.2vw;
}
.divtext {
  display: table;
  color: white;
  font-family: impact;
  font-size: 4.5vw;
}

<div id="container">
  <div class="divtext" data-len="">THIS IS JUST AN</div>
  <div class="divtext" data-len="">EXAMPLE</div>
  <div class="divtext" data-len="">TO SHOW YOU WHAT</div>
  <div class="divtext" data-len="">YOU WANT</div>
</div>

我们要做的就是获取第一行的宽度（els[0].clientWidth）和字体大小（parseFloat(window.getComputedStyle(els[0],null).getPropertyValue("font-size"))）作为参考，然后相应地计算后续行的字体大小。

Answer 33

我非常沮丧地尝试实现类似于fitty的紧密文本换行，因此最终我使用了基于画布的方法，但是我尝试了其他方法，但未成功。我要瞄准的东西看起来很像附件（对我而言）非常困难。希望有一天，我们将有一种仅使用CSS的简单方法。这种方法的缺点是将文本更像是图像，但是在某些用例中很好。

https://codesandbox.io/s/create-a-canvas-tightly-holding-a-word-st2h1?file=/index.html

此图片是四个出血画布的CSS网格布局的屏幕截图。

Answer 34

如果问题是字体在宽屏桌面上变得太大，我认为最简单的css方法就是这样（假设包装器最大1000px宽）

.specialText{
    font-size:2.4vw;
}

@media only screen and (min-width: 1000px) {
    .specialText {
        width:24px;
    }
}

因此，对于小于容器最大宽度的任何屏幕，它都是自动调整尺寸的，并且当屏幕更宽时（例如几乎所有台式机/笔记本电脑），固定尺寸

Answer 35

我刚刚创建了a demo的操作方法。它使用transform:scale()来实现一些监视元素大小调整的JS。可以很好地满足我的需求。

基于容器宽度的字体缩放

35 个答案:

但是如果容器不是视口（正文）怎么办？

应该动态改变容器的大小......

具有`calc()`，CSS单位和数学

数学

但它是如何运作的？

结论

使用CSS变量

JS：

HTML

基于容器宽度的字体缩放

35 个答案:

但是如果容器不是视口（正文）怎么办？

应该动态改变容器的大小......

具有calc()，CSS单位和数学

数学

但它是如何运作的？

结论

使用CSS变量

JS：

HTML

具有`calc()`，CSS单位和数学