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

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

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 2

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

Answer 3

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

它將流暢地調整大小（因爲元素更改大小會修改字體大小，而不僅僅是在文檔就緒或加載時），允許最小和最大字體大小以及其他一些選項以允許您調整其大小行爲。

Answer 4

我從來沒有嘗試過這個，也許它很瘋狂，但是不是所有的（不幸的）建議都是通過反覆改變尺寸來解決這個問題，直到文本合適，或許你可以嘗試兩種截然不同的字體大小（當然是用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"; 

這修復了註釋中記錄的錯誤。但我不知道是什麼改變了它們之間的中斷。