根據元素的高度和寬度的百分比變化增大或減小字體大小

我想在元素調整大小時調整元素內文本的字體大小。我設法得到它與此的jsfiddle寬度調整字體還算不錯：根據元素的高度和寬度的百分比變化增大或減小字體大小

但是，我只能調整它基於一個維度。我可以使用高度百分比，也可以使用寬度百分比。是否有一個方程考慮了兩個尺寸，以便尺寸適合高度和寬度？

2012-09-06 Chev

我把更多的時間放在這個比我關心承認，但一個朋友，我終於想出了最好的方式來縮放文本的元素。你必須使用畢達哥拉斯定理計算二維對角線，並從對角線上得到百分比差異。

var diagonal = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));

只計算一次原始大小，再次計算新大小，然後得到百分比差異。

var percentage = (newDiagonal - oldDiagonal)/newDiagonal;

然後只需增加相同百分比的字體大小。

var newFontSize = oldFontSize + (oldFontSize * percentage);

另一種選擇是跳過所有蹩腳的數學和使用這個插件，我們寫道：

jquery.dynamiText

來源

2013-02-05 17:40:44 Chev

如何將它從面積上劃掉？地址：

percentageAreaDifference = (1-percentageWidthDifference)*(1-percentageHeightDifference)

然後

newFontSize = startingFontSize * percentageAreaDifference;

雖然你可能想用它玩;我懷疑會縮小/增長字體比需要快一點。您可能要作出這樣的：

newFontSize = startingFontSize * Math.sqrt(percentageAreaDifference);

由於更改字體大小實際上縮小沿兩個維度，因此，在字體大小減少了50％降低一個字符佔用了75％（約）的區域。

來源

2012-09-06 16:42:27 kbelder

由於張貼這個[我試過兩個百分比合計在一起（HTTP： //jsfiddle.net/jWKWS/5/），然後使用總百分比來調整字體大小。它似乎工作正常，但我必須減少調整字體大小約7％，以防止在調整大小時意外文本溢出：/。它雖然有一些不可思議的副作用。我會玩你的想法。 – Chev

我想你只需要到newfontsize計算更改爲：

newFontSize = startingFontSize + (startingFontSize * (percentageWidthDifference + percentageHeightDifference));

如果寬度減小了很多，高度增加一點點，淨減少。反之亦然。可以假設你想保留包裝箱中的文字，然而，迴流會在那裏咬你。不知道你會如何保持它的確定性

來源

2012-09-06 16:48:26 Jonathan

是的，這是我的問題。我確實嘗試了總計百分比，它工作正常。我真正可以做的唯一事情是防止發生溢出，就是將新字體大小減少約7％。這似乎在大部分時間都保留了它。 – Chev

我不在看這個問題，並且錯過了通過的答案:)它看起來像你可能能夠在包含框上設置css溢出：隱藏，然後檢查是否有任何元素溢出：http：/ /stackoverflow.com/questions/7668636/check-with-jquery-if-div-has-overflowing-elements也許你可以繼續減少1的字體大小，直到沒有溢出？ – Jonathan

這很完美。謝謝！ – Chev

我想你可能想要sqrt的區域（作爲原始區域的倍數）。在this jsfiddle演示。

關鍵線（在var語句）：

 newArea = newWidth*newHeight, 
     origArea = startingWidth*startingHeight, 
     areaDiff = (newArea/origArea), 
     newFontSize = (startingFontSize * Math.sqrt(areaDiff));

的平方根被使用，因爲由一個字符所佔據的面積是大致成比例的字體大小的平方。所以N個字符所需的總面積爲〜[（f1/f0）^ 2] N。所以區域「因子」的平方根給出了要使用的新字體大小因子的度量。

一個工作的例子;如果新寬度是舊寬度的1.2倍，新高度是舊高度的1.5倍，則新區域是舊區域的1.8倍。這個公式然後說新的字體大小應該是舊字體大小的1.34倍。它似乎工作。

來源

2012-10-01 11:45:28

根據元素的高度和寬度的百分比變化增大或減小字體大小

回答

相關問題