計算文本填充所需空間所需的字體大小

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

我從來沒有嘗試過這個，也許它很瘋狂，但是通過一遍又一遍地改變大小直到文本適合來解決這個問題而不是所有（不幸的是無益的）建議，也許你可以嘗試兩種截然不同的字體大小（使用不 - 假設這種關系幾乎是線性的，那么當然包裹10和100，然后內插或推斷你的預期值？ 我不知道這樣做兩個布局對你的瓶頸是否太貴了。 如果是這樣，我不確定你真正有什么希望，因為字體可能很棘手。 但這可能會奏效。

更新 ：我使用這種技術創建了一個小提琴 。 它似乎工作得相當好。 相關代碼是：

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

工作演示

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";
    }
}