使用FitText jQuery插件调整文本大小

Question

使用FitText jQuery插件调整文本大小

4

我正在尝试使用FitText jquery插件来调整一些文本的大小。问题在于，只有在窗口调整大小事件后文本才会被放大。

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

看起来脚本最初至少会调用“resizer”函数。这里我有什么遗漏吗？

以下是我使用该脚本的方式：

<script src="/js/jquery.fittext.js"></script>
<script type="text/javascript">

    $("h1").fitText(.6);

</script>
</body>

我对这个东西还很陌生，只是试图把东西拼凑在一起，所以任何帮助都将不胜感激。

编辑
我在描述问题时应该更加具体。我试图在FlexSlider的标题框中使用FitText。我能够让Ankit下面的例子运行起来，但FlexSlider的标题文本仍然不正确。我认为必要的滑块元素没有及时加载，无法使FitText生效。我通过以下可怕的代码解决了这个问题：

<script type="text/javascript">
$(document).ready(function() {
       $('#spinner').hide();
    setTimeout( function() { $("h1").fitText(.6); }, 200 );
     setTimeout( function() { $("h1").fitText(.6); }, 300 );
     setTimeout( function() { $("h1").fitText(.6); }, 500 );
     setTimeout( function() { $("h1").fitText(.6); }, 700 );
   setTimeout( function() { $("h1").fitText(.6); }, 1500 );
}); 
</script>

我知道这可能是最简单的方法，但我的文本现在可以按照预期进行调整大小。如果有更好的建议，请告诉我。

- sherenator

我也遇到了同样的问题。你解决了吗？我需要一些帮助。 - Cihad Turhan

我刚刚通过在我的上面的编辑中使用 $document.ready 和 setTimeout 来解决了这个问题。 - sherenator

3个回答

1

你可能想在内容加载后添加此 JavaScript。尝试在关闭 body 标签之前添加脚本标记，看看是否有效。

编辑：我这里有一个简单的示例可以工作：

    <html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="https://raw.github.com/davatron5000/FitText.js/master/jquery.fittext.js"></script>
  </head>
  <body>
    <h1>This is test</h1>
    <script type="text/javascript">
          $("h1").fitText(0.6);
    </script>
  </body>
</html>

- Ankit

谢谢你的提示，但是脚本已经放置在闭合的body标签之前了。我会编辑上面的片段以反映这一点。 - sherenator

我已经更新了这个答案，并提供了一个能够工作的最小代码。你是否包含了正确版本的jquery和fittext js文件？ - Ankit

谢谢您的帮助，让我朝着正确的方向思考。我已经在上面更新了我的初始帖子，并添加了更多信息。 - sherenator

看起来你的h1标签在请求之前没有被附加到DOM上。你是在运行时添加它的吗（JS / Ajax）？ - Ankit

1

对于那些仍然遇到问题的人，这个修复方法对我有效。

在 jquery.fittext.js 中替换这段代码。

// Call once to set.
resizer();

使用这段代码，

$(window).load(function(){
    resizer();
});

- Khawer Zeshan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rob · Accepted Answer

如果有人感兴趣的话，现在可以使用flexslider回调来解决这个问题，方法如下：

$('.flexslider').flexslider({
  animationLoop: true,
  directionNav: false,
  start: function(){$(".fittext").fitText();},
  after: function(){$(".fittext").fitText();}
});