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

【问题标题】：Increase or decrease font size based on percentage change of height and width of an element根据元素高度和宽度的百分比变化增加或减少字体大小
【发布时间】：2012-08-31 12:43:00
【问题描述】：

我想在调整元素大小时调整元素内文本的字体大小。我设法让它用这个 jsFiddle 中的宽度很好地调整字体大小：

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

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

【问题讨论】：

标签： javascript jquery html math font-size

【解决方案1】：

把它建立在区域之外怎么样？添加：

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

然后

newFontSize = startingFontSize * percentageAreaDifference;

虽然你可能想玩它；我怀疑这会比需要的更快地缩小/增长字体。你可能想这样做：

newFontSize = startingFontSize * Math.sqrt(percentageAreaDifference);

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

【讨论】：

自从发了这个I tried totaling the two percentages together然后用总百分比来调整字体大小。它似乎工作正常，但我必须将调整后的字体大小减少约 7%，以防止在调整大小时意外文本溢出：/.虽然它有一些不稳定的副作用。我会玩弄你的想法。

【解决方案2】：

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

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

如果宽度减少很多，高度增加一点，净减少。反之亦然。但是，您可能希望将文本保留在框中，并且回流会咬住您。不知道你会如何确定地控制它

【讨论】：

是的，这是我的问题。我确实尝试过合计百分比，它工作正常。为了防止溢出发生，我唯一能做的就是将新字体大小减少大约 7%。这似乎让它在大部分的时间里都被包含在内。
我正在查看问题并错过了响应 :) 看起来您可以将包含框上的 css 设置为溢出：隐藏，然后检查是否有元素溢出：stackoverflow.com/questions/7668636/… 也许你可以继续将字体大小减小 1 直到没有溢出？

【解决方案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

【讨论】：

【解决方案4】：

我认为您可能想要该区域的 sqrt（作为原始区域的倍数）。演示在this 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 倍。而且它似乎有效。

【讨论】：