JQuery字体缩小按钮功能异常：点击后字体反而增大

你遇到的核心问题是单位不匹配：

• 你给.box设置的是pt单位的字体大小，但jQuery的css('font-size')会返回浏览器计算后的**像素(px)**值。比如14pt会被浏览器转换成约18.67px，parseInt后得到18；你把减1后的17作为pt设置回去，17pt≈22.67px，比原来的尺寸更大，所以字体反而变大。

提供三种可行的解决方式，按需选择：

方式1：统一使用px单位 #

直接把初始样式和JS里的单位都改成px，避免单位转换问题：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="fontDown()">button</button>
    
<div class="box" style="font-size: 19px; line-height: 19px;">sometext</div>

function fontDown() {
  var curSize = parseInt($('.box').css('font-size'));
  curSize--;
  $('.box').css({
    'font-size': `${curSize}px`,
    'line-height': `${curSize}px`
  });
}

方式2：准确转换px与pt单位 #

利用标准的dpi换算规则（96dpi下，1in=96px=72pt），把获取到的px值转换成pt后再计算：

function fontDown() {
  const curPx = parseInt($('.box').css('font-size'));
  // px转pt：pt = px * 72 / 96
  let curPt = curPx * 72 / 96;
  curPt--;
  $('.box').css({
    'font-size': `${curPt}pt`,
    'line-height': `${curPt}pt`
  });
}

方式3：用data属性存储当前字号 #

通过元素的data-*属性直接存储当前的pt值，完全跳过单位转换：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="fontDown()">button</button>
    
<div class="box" data-font-size="14" style="font-size: 14pt; line-height: 14pt;">sometext</div>

function fontDown() {
  let curSize = parseInt($('.box').data('font-size'));
  curSize--;
  $('.box')
    .data('font-size', curSize)
    .css({
      'font-size': `${curSize}pt`,
      'line-height': `${curSize}pt`
    });
}

内容的提问来源于stack exchange，提问作者Joshua Robison