根据元素的高度和宽度的百分比变化增大或减小字体大小

我想在元素调整大小时调整元素内文本的字体大小。我设法得到它与此的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

根据元素的高度和宽度的百分比变化增大或减小字体大小

回答

相关问题