JavaScript的字體大小調整

我有在一個給定的文本框中減小字體大小的算法，如果文本太大的盒子（適合箱）JavaScript的字體大小調整

，它工作得很好，但它確實低效的，因爲它是從字面上看，只需將字體大小減少1直到適合。

任何人都可以幫助我使它更有效率，如二元砍或什麼？

代碼：

function fitToBox(object, maxFontSize, minFontSize, maxHeight) { 
    var box = document.getElementById(object); 
    var currentHeight = box.offsetHeight;      
    var currentFontSize = maxFontSize;     
    do { 
     box.style.fontSize = currentFontSize+"pt"; 
     currentFontSize = box.style.fontSize.replace("pt", ""); 
     currentHeight = box.offsetHeight;              
     if(currentHeight >= maxHeight) { 
      currentFontSize -= 1; 
     } 
    } while (currentHeight > maxHeight && currentFontSize > minFontSize); 
    box.style.lineHeight = currentFontSize+"pt"; 
}

在HTML完整的示例（只需添加更多的文本到div看到正在進行的接頭）

<html> 
<head> 
<script type="text/javascript"> 
function fitToBox(object, maxFontSize, minFontSize, maxHeight) { 
    var box = document.getElementById(object); 
    var currentHeight = box.offsetHeight;      
    var currentFontSize = maxFontSize;     
    do { 
     box.style.fontSize = currentFontSize+"pt"; 
     currentFontSize = box.style.fontSize.replace("pt", ""); 
     currentHeight = box.offsetHeight;              
     if(currentHeight >= maxHeight) { 
      currentFontSize -= 1; 
     } 
    } while (currentHeight > maxHeight && currentFontSize > minFontSize); 
    box.style.lineHeight = currentFontSize+"pt"; 
} 
</script> 
</head> 
<body> 

<div id="fitme" style="background-color: yellow; font-size: 24pt; width: 400px;"> 
    This is some text that is fit into the box This is some text that is fit into the box This is some text that is fit into the box 
</div> 

<script type="text/javascript"> 
    fitToBox("fitme", 24, 4, 80); 
</script> 

</body> 
</html>

來源

2012-11-28 TheStoneFox

它可能有助於看到一些其他的JavaScript和HTML被使用。更具體的是什麼調用這個函數。當我在瀏覽器中試用時，上述功能實際上很麻煩，所以也許我不會按照預期調用它。 – robbieAreBest

我會給原帖 – TheStoneFox

下面是4從9減少循環計數一個版本在你的榜樣：

function fitToBox(box, maxFontSize, minFontSize, maxHeight) { 
    inc = (maxFontSize - minFontSize)/2; 
    currentFontSize = minFontSize + inc; 
    box.style.fontSize = currentFontSize+"pt"; 
    while(inc >= 1) { 
     if(box.offsetHeight > maxHeight) { 
      dir = -1; 
     } else { 
      dir = 1; 
     } 
     inc = Math.floor(inc/2); 
     currentFontSize += (dir * inc); 
     box.style.fontSize = currentFontSize+"pt"; 
    } 
}

它首先假設中途大小是一個良好的開端和二進制印章的方式向最大值以下最合適，根據需要改變方向。

我無法弄清楚爲什麼要更改CSS行高，所以我沒有這樣做。

來源

2012-11-29 22:42:20 lotsoffreetime

我正在改變行高，因爲它最初通常是以div的樣式設置的，所以如果在javascript中減小字體大小，那麼box的高度會受到較大的原始行高的影響。 – TheStoneFox

你能不能做這樣的事，你衡量px中的字體高度？

function fitToBox(object, maxFontSize, minFontSize, maxHeight) { 
    var box = document.getElementById(object);      
    var currentFontSize = box.offsetHeight - 6; //however much space you want to leave     
    if(currentFontSize > maxFontSize){ 
      currentFontSize = maxFontSize; 
    }else if(currentFontSize < minFontSize){ 
      currentFontSize = minFontSize; 
    } 
    box.style.lineHeight = currentFontSize+"px"; 
    }

來源

2012-11-28 16:43:39 robbieAreBest

添加一個完整的例子，不會給我後面的效果。想像適合內容的東西就像powerpoint那樣，字體越來越小，以佔據給定框中可用的最多空間。我的功能正常，但效率不高。 – TheStoneFox

嘗試根據盒子樣式計算允許的最大尺寸。

獲取元素高度 - 頂部填充 - 底部填充，您將獲得最大尺寸。

var height = parseInt(box.clientHeight); 
var pt = parseInt(box.style.paddingTop); 
var pb = parseInt(box.style.paddingBottom); 
var fontsize = (height - pt - pb) + "px";

至於下一部分。當涉及到檢測溢出時，想到的解決方案就是做類似的事情。

var boxClone = box.cloneNode(true) 
boxClone.style.visibility = "hidden"; 
boxClone.id = "boxClone"; 
document.getElementsByTagName('body')[0].appendChild(boxClone); 

box.onkeydown = function(e) { 

}

在keydown事件，攔截焦炭這就是即將獲得附加，並將其附加到boxclone - 然後測量其大小，並將其與原來的。一旦你知道了數字，你可以相應地調整你的文字。

來源

2012-11-28 16:45:42 roacher

好吧，所以你基本上說只是設置字體大小在px而不是點，然後只是使用框高來做到這一點？我不明白的是，這將如何讓字體儘可能大，然後減少輸入的文字？ – TheStoneFox

對不起，最初我誤解了你所需要的。希望編輯將幫助你 – roacher

我仍然不認爲這涉及到我的問題。我不是在談論你何時鍵入一個盒子。文本是預先創建的，它被放到頁面上的固定寬度/高度div上。而且我希望該div的字體大小是動態的，所以如果沒有很多文本，則字體大小意味着文本在框中佔用儘可能多的空間。但是，如果有很多文本，那麼字體大小必須減小以確保它適合框。 – TheStoneFox

JavaScript的字體大小調整

回答

相關問題