Question

我正在开展一个小项目，我需要做的最后一件事就是创建一个很好的响应标题。

我发现FitText.js这似乎是我喜欢的东西，而且正是我需要的东西。唯一的问题是这个插件使用jQuery，我根本没有在项目中使用jQuery，也不想只使用一个小插件。你有没有听过或使用类似的FitText.js插件，除了它不需要jQuery？

Answer 1

Jeremy Keith（@adactio）正在维护FitText的非jQuery替代方案：

https://github.com/adactio/FitText.js

Answer 2

这样的事情应该让你去，先彻底测试。基本上，您可以根据元素的偏移宽度缩放文本的大小。您可能想要设置最小和最大字体大小，但我不明白这一点。

resize函数可以是两行代码。

<style type="text/css">
  div {
    border: 1px solid blue;
    white-space: nowrap;
    text-align: center;
  }
</style>

<script>

function resize(el, factor) {

  // Get element width
  var width = el.offsetWidth;

  // set default for factor
  if (typeof factor == 'undefined') {
    factor = 5;
  }

  // Set fontsize to new size
  el.style.fontSize = (width / factor | 0) + 'px';
}

window.onload = function() {
  function doResize() {resize(document.getElementById('d0'), 6);}
  window.onresize = doResize;
  doResize();
}

</script>

<div id="d0">Some text</div>

Answer 3

OP，

jQuery压缩~94 KB。 Zepto压缩了~9.7 KB。

简而言之，如果你改为包含Zepto，并将插件最后一行的jQuery引用更改为Zepto - 它只是工作。见this Fiddle

(function ($) {
    $.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', resizer);
        });
    };
})(Zepto);

根据the docs：

Zepto是一个极简主义的JavaScript库，适用于现代浏览器，主要是与jQuery兼容的API。

因此，如果有人想要使用jQuery插件*而不必包含整个jQuery库，那么Zepto似乎是一个合理的解决方法。

*虽然100％jQuery覆盖率不是设计目标，但提供的API与其jQuery对应物匹配。

希望有所帮助。

Answer 4

我想这个问题现在已经解决了，但是我一直在寻找类似的解决方案。我最终制作了自己的Fittext插件，因为我需要能够在特定的最小屏幕宽度之上切换它。因此，如果有人遇到同样的问题，这就是我提出的解决方案：

https://github.com/dinealbrecht/fittext

FitText.js的非jQuery替代品？

4 个答案: