文本字体调整大小

Question

我在编写一个字体大小增加/减少的jQuery函数时遇到了问题。它有三种大小：大、中（默认）和小。问题在于没有“重置”按钮，而是只有两个按钮来增加或减小字体大小。

当我将字体调整为较大尺寸时，如果我想将其减小到中等大小，则它不会回到中等大小，而是变成较小的值或向后（从较小到较大）。有没有办法解决这个问题？感谢您能给予任何帮助。

- marsalal1014

---

你需要在这里包含一些代码示例才能得到答案。听起来你只是将一个按钮连接到了Big()，另一个按钮连接到了Small()，而它们应该调整一个变量在三个状态之间上下移动，然后将其传递给resize函数。 - Matt Lacey

Answer 1

这是我使用的：

<script>
$(document).ready(function() { 
  var size = $('#container').css('font-size'); 
  $("#largeFont").click(function(){ 
      $('#container').css('font-size', '30px');
      return false; 
  });
  $("#resetFont").click(function(){ 
      $('#container').css('font-size', size);
      return false; 
  });
  $("#increaseFont").click(function() { 
      var size = $('#container').css('font-size');
      $('#container').css('font-size', parseInt(size)+2); 
      return false;
  });
  $("#decreaseFont").click(function() { 
      var size = $('#container').css('font-size');
      $('#container').css('font-size', parseInt(size)-2); 
      return false;
  }); 
  $("#smallFont").click(function(){ 
      $('#container').css('font-size', '10px');
      return false; 
  });
});

</script>

在 HTML 中（在这种情况下，我使用增加、减少和重置），但你可以设置为自定义字体。

<a id="largeFont">Large Font</a> - 
<a id="increaseFont">Increase Font</a> - 
<a id="decreaseFont">Decrease Font</a> - 
<a id="smallFont">Small Font</a> - 
<a id="resetFont">Reset</a>

<div id="container">
 Here's some text
</div>

这是JSFiddle链接

- Book Of Zeus

---

嗨！我已经尝试过了，但是没有重置按钮。只有两个按钮：增加和减少。这些按钮将用于移动到三种尺寸中的一种。 - marsalal1014

我放置了一个 <a id="resetFont"> 重置 </a>，在JS中使用默认大小，或者如果需要，您可以设置自定义大小，例如：$('#container').css('font-size', '12px');。 - Book Of Zeus

我没有使用你的代码，但它给了我解决问题的思路，谢谢！ - marsalal1014

Answer 2

我为此创建了一个实际的jquery插件。您可以传递自定义设置以进行自己的大小和按钮类。它支持通过https://github.com/carhartl/jquery-cookie使用cookies。

这是我的fiddle：http://jsfiddle.net/skibulk/eh5xr0z3/22/ 这是插件：

(function($){
    $.fontSizer = function(options) {
        // Load Options
        var opt = $.extend({
            selector:      "body",
            sizeMaximum:    20,
            sizeDefault:    14,
            sizeMinimum:    10,
            sizeInterval:   2,
            buttonIncrease: ".font-sizer .increase",
            buttonDecrease: ".font-sizer .decrease",
            buttonReset:    ".font-sizer .reset",
        }, options);

        // Initialize
        $(opt.buttonIncrease).click(increase);
        $(opt.buttonDecrease).click(decrease);
        $(opt.buttonReset).click(reset);
        render( $.cookie('font-size') || opt.sizeDefault );

        // Increase Handler
        function increase() {
            size = parseFloat($(opt.selector).css("font-size"));
            size = Math.min(size + opt.sizeInterval, opt.sizeMaximum);
            render(size);
        }

        // Decrease Handler
        function decrease() {
            size = parseFloat($(opt.selector).css("font-size"));
            size = Math.max(size - opt.sizeInterval, opt.sizeMinimum);
            render(size);
        }

        // Reset Handler
        function reset() {
            render(opt.sizeDefault);
        }

        // Render
        function render(size) {
            $(opt.selector).css("font-size", size +"px");
            $(opt.buttonIncrease).prop( "disabled", (size >= opt.sizeMaximum) );
            $(opt.buttonDecrease).prop( "disabled", size <= opt.sizeMinimum );
            $(opt.buttonReset).prop( "disabled", (size == opt.sizeDefault) );
            $.cookie('font-size', size);
        }
    };
})(jQuery);

jQuery.fontSizer({selector:"body"});

- skibulk

Answer 3

一般来说，如果您想要三种字体大小，我建议不要使用按钮来增加和减小字体大小。相反，我建议您向用户提供字体大小的示例，让他们可以点击他们想要的那个。例如，看看Kindle在Android上是如何做的（我现在找不到一个好的公共HTML示例）：http://www.techsavys.info/2011/09/review-on-kindle-for-android-an-ereader-which-beats-all.html

但是，如果您想要按钮，您可以这样做：

  <button id="largerFont">Larger Font</button>
  <button id="smallerFont">Smaller Font</button>
  <p id="container">Change the font size of this.</p>

至于 JavaScript，这里有一个替代方案，它允许你设置增量的数量（在下面设置为 1，因为那是你想要的）以及增量的大小（请注意，你可能需要稍微整理一下）：

$(document).ready(function() { 
  var size = parseInt($('#container').css('font-size').replace("px", ""), 10); 
  var incrementAmount = 4;
  var increments = 1;
  $("#largerFont").click(function(){ 
    var curSize = parseInt($('#container').css('font-size').replace("px", ""), 10);    

    $('#container').css('font-size', curSize + incrementAmount);        
    if ((curSize + incrementAmount) >= (size + (incrementAmount * increments))) {
        $("#largerFont").prop("disabled", true);
    }
    $("#smallerFont").prop("disabled", false);

    return false; 
  });
  $("#smallerFont").click(function(){ 
    var curSize = parseInt($('#container').css('font-size').replace("px", ""), 10);    

    $('#container').css('font-size', curSize - incrementAmount);        
    if ((curSize - incrementAmount) <= (size - (incrementAmount * increments))) {
        $("#smallerFont").prop("disabled", true);
    }
    $("#largerFont").prop("disabled", false);

    return false; 
  });
});

这里有一个在线演示供您参考: http://jsfiddle.net/fordlover49/jbXmE/1/

- PriorityMark

Answer 4

您可以使用以下脚本：

<script >
$(document).ready(function() {
    $('#plus').click(function() {
        curSize = parseInt($('.post-body').css('font-size')) + 1;

        $('.post').css('font-size', curSize);
    });
    $('#minus').click(function() {
        curSize = parseInt($('.post-body').css('font-size')) - 1;
        if (curSize >= 12)
            $('.post').css('font-size', curSize);
    });
}); <

/script>

详情请查看页面：https://www.techxplus.com/2019/09/javascript-font-resizer.html

- subhro