使用 CSS/jQuery 的响应式字体大小答案

【问题标题】：Responsive font size using CSS/jQuery使用 CSS/jQuery 的响应式字体大小
【发布时间】：2014-11-02 17:54:17
【问题描述】：

我想在 div 中创建响应式文本。

我尝试了jquery-textfill 和FlowType，但它们根本不适合我。

FlowType 不使用所有可用空间，仅使用其中一部分 (demo)，而 textfill 不考虑高度 (demo)。

我是在错误地使用它们还是我想要的东西太难实现了？

我的 HTML：

<body>
    <div class="external">
        <div class="internal">Example</div>
    </div>    
</body>

我的 CSS：

.internal{width:100%;height:100%}
.external{width:400px;height:50px;}

附言。目前对视口的支持还不够。

【问题讨论】：

你能描述一下你所说的“响应式文本”是什么意思吗？它应该如何准确响应？

标签： javascript jquery html css responsive-design

【解决方案1】：

编辑：更新为 resize 事件监听器。更新fiddle。

据我了解，您希望文本尽可能大，同时仍适合包含 <div> 的内容，对吗？我的解决方案是在文本周围放置一个<span>，它符合文本的正常大小。然后计算容器尺寸与<span> 尺寸之间的比率。以较小的比例（宽度或高度）为准，使用该比例放大文本。

HTML：

<div class="container">
    <span class="text-fitter">
        text here
    </span>
</div>

JS（jQuery）：

textfit();
$(window).on('resize', textfit);

function textfit() {
    $('.text-fitter').css('font-size', 'medium');
    var w1 = $('.container').width()-10;
    var w2 = $('.text-fitter').width();
    var wRatio = Math.round(w1 / w2 * 10) / 10;

    var h1 = $('.container').height()-10;
    var h2 = $('.text-fitter').height();
    var hRatio = Math.round(h1 / h2 * 10) / 10;

    var constraint = Math.min(wRatio, hRatio);

    $('.text-fitter').css('font-size', constraint + 'em');
}

这是fiddle。调整 CSS 中的 .container 尺寸以查看它的实际效果。

【讨论】：

是的，这就是我想要的。不过，我认为我们还应该添加一些 JS 侦听器，以便对调整浏览器窗口大小做出反应。
@dev9 同样，您需要更具体一点。调整窗口大小时会发生什么变化？在您的问题中，.external 具有固定宽度（400 像素），因此在调整大小时不会改变，因此文本大小也不会改变。请实际描述你想要什么。 “对调整大小做出反应”太模糊了。
我想要你发布的内容。棘手的是我不控制.external div - 所以如果它的大小设置为特定值或者它的大小设置为auto 或x %，它应该可以工作
@dev9 更新了答案。将来，请明确您的规范，因为这会影响哪种答案会对您有所帮助。
谢谢，但您更新的小提琴并没有涵盖整个文本，只是其中的一部分。

【解决方案2】：

CSS

.internal{width:100%;height:100%}
.external{width:auto;height:auto;background-color:yellow}

JQuery

$(".external").fitText(0.5);

DEMO 1

更新 1：

CSS

.internal{width:auto;height:auto;position:absolute;}
.external{width:400px;height:50px;background-color:yellow;position:relative;}

JQuery

$(".external").fitText();

DEMO 2

更新 2：

JQuery

var ex=$(".external");
var h=ex.height();
var w=ex.width();
ex.fitText(Math.min(h,w)/Math.max(h,w) );

DEMO 3

更新 4：

Bigtext 是一个 jQuery 文本插件，它可以自动放大文本的字体大小以填充其父容器，而不会溢出容器 Div。 jQuery Bigtext Plugin

【讨论】：

我不想让它自动。它将成为第 3 方用户的小部件。其中一些可能会为 HEIGHT 或 WIDTH 分配一些常量值。
请参阅我的回答中的Update 1。
你必须同时增加高度和宽度。
在你的小提琴$(".external").fitText(0.5);
但这就是我的重点。即使宽度和高度不相关，我也想调整字体。编辑：不，添加 0.5 不会使其工作

【解决方案3】：

对于偶然发现这篇旧帖子的任何人，我找到了一个我认为完美的解决方案。

您使用 Dave Rupert 编写的这个漂亮的插件，根据自己的喜好配置设置，我为它添加了一个包装器，允许您定义要调整大小的元素。它还存储原始字体大小，因此当您缩放时，文本会受到原始大小的限制，否则会无限缩放。

这是一个 sn-p 和一个 jsfiddle。 JSFiddle

注意：sn-p 仅在 JSFiddle 中调整大小时运行，因此请务必调整屏幕大小。在生产中，它在负载下运行。

var headings = [$('h1'), $('h2'), $('h3')]

  $.each(headings, function(index, heading) {

    var fontsize = heading.css('font-size');
    $(window).on('load resize', function() {
      if (heading.parent()[0] &&
        heading.parent()[0].scrollWidth > $('.container').innerWidth()) {
        heading.fitText(1, {
          minFontSize: '10px',
          maxFontSize: fontsize
        });
      }
    });
  });


  /*global jQuery */
  /*!
   * FitText.js 1.2
   *
   * Copyright 2011, Dave Rupert http://daverupert.com
   * Released under the WTFPL license
   * http://sam.zoy.org/wtfpl/
   *
   * Date: Thu May 05 14:23:00 2011 -0600
   */

  $.fn.fitText = function(kompressor, options) {
    // Setup options
    var compressor = kompressor || 1,
      settings = $.extend({
        'minFontSize': Number.NEGATIVE_INFINITY,
        'maxFontSize': Number.POSITIVE_INFINITY
      }, options);
    return this.each(function() {
      // Store the object
      var $this = $(this);
      // Resizer() resizes items based on the object width divided by the compressor * 10
      var resizer = function() {
        $this.css('font-size', Math.max(Math.min($this.width() / (compressor * 10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
      };
      // Call once to set.
      resizer();
      // Call on resize. Opera debounces their resize by default.
      $(window).on('resize.fittext orientationchange.fittext', resizer);
    });
  };

.container {
  width: 80vw;
  background: yellow;
}

h1 {
  font-size: 5rem;
}

h2 {
  font-size: 4rem;
}

h3 {
  font-size: 3rem;
}

h4 {
  font-size: 1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1>GIGANTICFONT</h1>
</div>
<div class="container">
  <h2>LargishFont</h2>
</div>
<div class="container">
  <h3>Mediumfont</h3>
</div>
<div class="container">
  <h4>smallfont</h4>
</div>

【讨论】：