Question

如何计算文本元素填充所需空间所需的字体大小？例如：

txt = "this text should fill the div precisely"
el = $("<div/>")
    .html(txt)
    .width(200)
    .css({
        fontFamily: "arial",
        fontSize: font_size_to_fit(txt,"arial",200)
    });

编辑：我要求一个基于直接数学公式的计算大小的函数。它可以是近似值。 上述问题提出的解决方案不正确因为它涉及交互式DOM操作，这种操作太重而无法置于瓶颈区域。

Answer 1

我从来没有试过这个，也许这很疯狂，但是不是所有的（不幸的是无益的）建议通过一遍又一遍地改变大小直到文本适合来解决这个问题，也许你可以尝试两种截然不同的字体大小（假设这种关系应该几乎是线性的，那么使用no-wrap，当然），例如10和100然后插值或推断你的预期值？我不知道这样做两个布局对你的瓶颈是否太贵了。如果是这样，我不确定你真正有什么希望，因为字体可能很棘手。但这可能有用。

更新：我使用此技术创建了 Fiddle 。它似乎工作得相当好。相关代码是：

var font_size_to_fit = (function() {
    var $test = $("<span/>").appendTo("body").css({
        visibility: "hidden", 
        border: 0, 
        padding: 0, 
        whiteSpace: "pre"
    });
    var minFont = 10, maxFont = 100; 
    return function(txt, fontFamily, size) {
        $test.appendTo("body").css({fontFamily: fontFamily}).text(txt);
        $test.css({fontSize: maxFont + "px"});
        var maxWidth = $test.width();
        $test.css({fontSize: minFont + "px"});
        var minWidth = $test.width();
        var width = (size - minWidth) * (maxFont - minFont) / 
            (maxWidth - minWidth) + minFont;
        $test.detach();
        return width + "px";
    };
}());

这可能还需要进行一些错误检查，以确保我们没有除零，这在minWidth == maxWidth时会发生，很可能在提供的文本为空时。这是留给读者的练习。

另一次更新：这在某些方面破裂了。我更新了小提琴，包括：

        return (width - .1) + "px";

这修复了评论中提到的错误。但是我不知道发生了什么变化让它在两者之间中断。

Answer 2

function font_size_to_fit(text, fontFamily, divSize) {
  var tester = $("<div/>")
  .appendTo("body")
  .css({
    position: "absolute",
    left: "-9999px",
    fontFamily: fontFamily })
  .html(text);

  var width;
  var fontSize = 72;
  do {
    tester.css("fontSize", fontSize);
    fontSize -= 1;
    width = tester.width();
  } while (!(width <= divSize && width >= divSize * .98));
  return fontSize;
}

也许是这样的？（注意：不解决潜在的浏览器最小字体大小，不希望使循环过于复杂。）

（编辑一次修复一些潜在的错误）

Answer 3

FitText.js 是一个很棒的jQuery插件。

它会流畅地调整大小（因为元素会改变大小，它会修改字体大小，而不仅仅是文档就绪或加载），允许最小和最大字体大小，还有一些其他选项可以让你调整它的行为

Answer 4

Working Demo

var x = 1;
var y = 20; //staring font-size
txt = "this text should fill the div precisely";
$('#element').html(txt).width(200).height(30).css('font-family', 'arial');
while (x == 1) {
    var element = document.querySelector('#element');
    if ((element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)) {
        element.style.background = "yellow";
        element.style.fontSize = parseInt(y) + 'px';
        y--;
    } else {
        x = 0;
        element.style.background = "blue";
    }
}

计算文本填充所需空间所需的字体大小

4 个答案: