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

Question

我想在调整元素大小时调整元素中文本的字体大小。在这个jsFiddle:中，我设法很好地调整了字体的大小

http://jsfiddle.net/jWKWS/3/

但是，我只能根据一个维度调整它的大小。我可以使用高度百分比，也可以使用宽度百分比。是否需要用一个等式将两个尺寸都考虑在内，以便根据高度和宽度对尺寸进行适当调整？

Answer 1

以区域为基础如何？添加：

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

然后

newFontSize = startingFontSize * percentageAreaDifference;

尽管你可能想玩它；我怀疑这会使字体缩小/增长得比需要的快一点。你可能想制作：

newFontSize = startingFontSize * Math.sqrt(percentageAreaDifference);

由于更改字体大小实际上会使其沿两个维度收缩，因此字体大小减少50%会使字符所占的区域减少75%（大致）。

Answer 2

我认为您只需要将newfontsize计算更改为：

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

如果宽度减少很多，而高度增加一点，净减少。反之亦然。然而，很可能你想把文本放在盒子里，回流会让你很痛苦。不确定如何确定地将其包含在中

Answer 3

我在这方面投入了比我愿意承认的多得多的时间，但我和一位朋友终于找到了用元素缩放文本的最佳方法。你必须使用勾股定理计算二维对角线，并得到对角线的百分比差。

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

只需为原始尺寸计算一次，为新尺寸计算一次，然后得到百分比差异。

var percentage = (newDiagonal - oldDiagonal) / newDiagonal;

然后简单地将字体大小增加相同的百分比。

var newFontSize = oldFontSize + (oldFontSize * percentage);

---

另一个选择是跳过所有糟糕的数学，使用我们写的这个插件：

jquery.dynamiText

Answer 4

我认为您可能想要该区域的sqrt（作为原始区域的倍数）。在这个jsfiddle中演示。

关键行是（在var语句中）：

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

之所以使用sqrt，是因为字符所占的面积与字体大小的平方大致成比例。因此，N个字符所需的总面积为~[（f1/f0）^2]N。因此，面积"因子"的平方根给出了要使用的新字体大小因子的度量。

一个行之有效的例子；如果新宽度是旧宽度的1.2倍，而新高度是旧高度的1.5倍，则新面积是旧面积的1.8倍。这个公式说新的字体大小应该是旧字体大小的1.34倍。这似乎奏效了。