30 回答

• 14

  使用 vw ， em ＆co . 确实很有效，但我总是需要人的触摸进行微调 .

  这里's a script I just wrote based on @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

  回复于 2024-04-26T21:29:21+08:00
• 6

  看看我的代码吧 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);
      }
  });
  

  

  希望这能帮助你

  回复于 2024-04-26T21:29:21+08:00
• 24

  这对我有用：

  我尝试根据设置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是一个匹配高度的字体大小;取最小的 Value

  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元素或小于它的父元素的元素，否则如果子元素和父元素具有相同的宽度/高度函数将失败

  回复于 2024-04-26T21:29:21+08:00
• 6

  对于动态文本，这个插件非常有用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();
  

  回复于 2024-04-26T21:29:21+08:00
• 14

  直接的媒体查询似乎是一个更简单，更容易理解的解决方案，可根据可能是动态的容器大小调整字体大小 .

  下面将字体大小调整为容器的大小，容器是否缩放到视口大小，或者是否达到其最大值 . 如果您有非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;
      }
  }
  

  回复于 2024-04-26T21:29:21+08:00
• 21

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

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

  并通过设置文本系数更改font-size以进行更正：

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

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

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

  回复于 2024-04-26T21:29:21+08:00
• 6

  在你的CSS内部尝试在底部添加这个，在设计开始破坏的地方改变320px宽度：

  @media only screen and (max-width: 320px) {
  
         body { font-size: 1em; }
  
      }
  

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

  回复于 2024-04-26T21:29:21+08:00
• 7

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

  抛开视口单元不能同时出现文本的旁边父单元的限制（例如，％大小的行为与其他人一样），视口单元确实提供了一个非常强大的工具：能够获得最小/最大维度 . 你不能在其他任何地方做到这一点 - 你不能说..使这个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都只是我的自定义点击拖动功能

  回复于 2024-04-26T21:29:21+08:00
• 6

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

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

  回复于 2024-04-26T21:29:21+08:00
• 2

  使用CSS变量

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

  让's say you'在你的页面上有一个列，它是移动用户屏幕宽度的100％，但是 max-width 是800px，所以在桌面上，列的两边都有一些空间 . 把它放在页面顶部：

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

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

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

  它不是纯粹的CSS方法，但它非常接近 .

  回复于 2024-04-26T21:29:21+08:00
• 6

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

  回复于 2024-04-26T21:29:21+08:00
• 1233

  你在找这样的东西吗？ =>
  http://jsfiddle.net/sijav/dGsC9/4/
  http://fiddle.jshell.net/sijav/dGsC9/4/show/
  我使用flowtype和's working great (however it' s js而不是纯css解决方案）

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

  回复于 2024-04-26T21:29:21+08:00
• 6

  EDIT: If the container is not the body CSS技巧涵盖了您的所有选项：https://css-tricks.com/fitting-text-to-a-container/

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

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

  Value 观是：

  • 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

  另外，请查看这篇文章，该文章使用了一种名为'molten leading'的技术来调整行高 . https://css-tricks.com/molten-leading-css/

  回复于 2024-04-26T21:29:21+08:00
• 1

  这个问题有一个很大的哲学 . 最简单的做法是给身体一个字体大小（我推荐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 */
  

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

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

  回复于 2024-04-26T21:29:21+08:00
• 268

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

  (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);
  

  回复于 2024-04-26T21:29:21+08:00
• 2

  我自己的解决方案，基于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;
  };
  

  回复于 2024-04-26T21:29:21+08:00
• 3

  始终使用此属性 element ：

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

  要么

  CSS： style = "font-size: 100%;"

  当你全屏显示时，你应该已经计算了一个 scale 变量（scale> 1或scale = 1） . 然后，全屏：

  document.body.style.fontSize = (scale * 100) + "%";
  

  它与很少的代码很好地协同工作 .

  回复于 2024-04-26T21:29:21+08:00
• 27

  But what if the container is not the viewport (body)?

  真正的答案是 transform property 允许您通过倾斜，旋转，平移或缩放来可视地操纵元素：

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

  回复于 2024-04-26T21:29:21+08:00
• 2

  我在我的一个项目中做的是在vw和vh之间的“混合”，以根据我的需要调整字体大小，例如：

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

  我知道这不能回答op的问题，但也许它可以成为其他任何人的解决方案 .

  回复于 2024-04-26T21:29:21+08:00
• 13

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

  你可以像这样使用它：

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

  回复于 2024-04-26T21:29:21+08:00
• 0

  There is a way to do this WITHOUT 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/

  Want something more flashy?

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

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

  回复于 2024-04-26T21:29:21+08:00
• 2

  具有calc（），CSS单位和数学的纯CSS解决方案

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

  我终于得到了一个纯CSS的解决方案，使用 calc() 与不同的单位 . 您需要对公式进行一些基本的数学理解才能计算 calc() 的表达式 .

  当我解决这个问题的时候，我必须得到一个整页宽度的响应式 Headers ，并在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)
  

  到我的 Headers ，它在每个视口中调整得很好 .

  但它是如何运作的？

  我们需要一些常量 . 100vw 表示视口的整个宽度，我的目标是使用一些填充 Build 全宽 Headers .

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

  结论

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

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

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

  回复于 2024-04-26T21:29:21+08:00
• 2

  但是如果容器不是视口（主体）怎么办？

  Alex根据接受的答案在评论中提出了这个问题 .

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

  Example 1

  但是，对于灵活的宽度容器，必须意识到容器在某种程度上是 still being sized off the viewport . 因此，需要根据与视口的百分比大小差异来调整 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 的子项，它是 100% 宽度的 50% ，这是此基本情况下的视口大小 . 基本上，你想设置一个对你来说很好看的 vw . 正如您在上面的CSS中的评论中所看到的那样，你可以通过它来实现数学上与完整视口大小有关，但您不需要这样做 . 文本将与容器一起使用"flex"，因为容器在视口大小调整时弯曲 . 更新：here's an example of two differently sized containers .

  Example 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动态改变其百分比关系，那么无论基础"target"是什么，都需要重新计算以保持相同的"relationship"用于文本大小调整 .

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

  A Challenge

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

  回复于 2024-04-26T21:29:21+08:00
• 5

  为了使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 或 % 才能获得正确的结果...如果元素的样式太复杂，那么如果您开始疯狂地调整窗口大小，浏览器可能会崩溃 .

  回复于 2024-04-26T21:29:21+08:00
• 2

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

  回复于 2024-04-26T21:29:21+08:00
• 2

  你试过http://simplefocus.com/flowtype/吗？

  这就是我用于我的网站，并且工作得很好 . 希望能帮助到你 .

  回复于 2024-04-26T21:29:21+08:00
• 5

  更新，因为我投了一票 .

  这是功能：

  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/

  回复于 2024-04-26T21:29:21+08:00
• 20

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

  但后来我发现了这个，它起作用了：

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

  用法示例：

  $('.someText').quickfit({max:50,tolerance:.4})

  回复于 2024-04-26T21:29:21+08:00
• 0

  我已经使用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

  回复于 2024-04-26T21:29:21+08:00
• 0

  SVG解决方案：

  <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>
  

  https://jsfiddle.net/qc8ht5eb/

  回复于 2024-04-26T21:29:21+08:00