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

我想在调整元素大小时调整元素中文本的字体大小。我设法让它以JSFIDLE中的宽度很好地调整字体大小：

---

但是，我只能基于一个维度调整它的大小。我可以使用高度百分比，也可以使用宽度百分比。有没有办法用一个方程式同时考虑两个尺寸，以便根据高度和宽度适当调整尺寸？

以面积为基准如何？加：

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

然后

newFontSize = startingFontSize * percentageAreaDifference;

虽然你可能想玩它；我怀疑这会使字体收缩/增长得比需要的快一点。您可能需要这样做：

newFontSize = startingFontSize * Math.sqrt(percentageAreaDifference);

---

因为更改字体大小实际上会使其沿两个方向收缩，因此字体大小减小50%会使字符占用的区域大约减少75%。

将其置于区域之外如何？加：

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

然后

newFontSize = startingFontSize * percentageAreaDifference;

虽然你可能想玩它；我怀疑这会使字体收缩/增长得比需要的快一点。您可能需要这样做：

newFontSize = startingFontSize * Math.sqrt(percentageAreaDifference);

---

因为更改字体大小实际上会使其沿两个方向收缩，因此字体大小减少50%会使字符所占的区域大约减少75%。

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

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

---

如果宽度减少很多，高度增加一点，净减少。反之亦然。然而，假定您希望保留框中包含的文本，回流将在那里咬您一口。不确定您将如何确定地控制它

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

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

---

如果宽度减少很多，高度增加一点，净减少。反之亦然。然而，假定您希望保留框中包含的文本，回流将在那里咬您一口。不确定您将如何确定地控制它

我想您可能希望该区域的sqrt是原始区域的倍数。演示

关键行在var语句中：

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

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

---

一个成功的例子；如果新宽度是旧宽度的1.2倍，新高度是旧高度的1.5倍，则新区域是旧区域的1.8倍。这个公式表示新字体大小应该是旧字体大小的1.34倍。这似乎是可行的。

我认为您可能希望该区域的sqrt是原始区域的倍数。演示

关键行在var语句中：

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

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

---

一个成功的例子；如果新宽度是旧宽度的1.2倍，新高度是旧高度的1.5倍，则新区域是旧区域的1.8倍。这个公式表示新字体大小应该是旧字体大小的1.34倍。这似乎很管用。

我花了比我愿意承认的多得多的时间，但我和一个朋友终于想出了用元素缩放文本的最佳方法。你必须使用毕达哥拉斯定理计算二维对角线，并从对角线中得到百分比差

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

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

var percentage = (newDiagonal - oldDiagonal) / newDiagonal;

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

var newFontSize = oldFontSize + (oldFontSize * percentage);

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

---

我花了比我想承认的多得多的时间，但我和一个朋友终于想出了用元素缩放文本的最佳方法。你必须使用毕达哥拉斯定理计算二维对角线，并从对角线中得到百分比差

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

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

var percentage = (newDiagonal - oldDiagonal) / newDiagonal;

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

var newFontSize = oldFontSize + (oldFontSize * percentage);

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

---

自从发布此信息，然后使用总百分比调整字体大小。它似乎工作正常，但我必须将调整后的字体大小减少约7%，以防止在调整大小时意外出现文本溢出：/。但是它有一些不可靠的副作用。我要玩玩你的想法。自从发布这个，然后用总百分比来调整字体大小。它似乎工作正常，但我必须将调整后的字体大小减少约7%，以防止在调整大小时意外出现文本溢出：/。但是它有一些不可靠的副作用。我要玩弄你的想法。是的，这是我的问题。我确实尝试了合计百分比，效果很好。唯一的

---

我真正能做的防止溢出发生的事情是将新字体大小减少大约7%。这似乎让它在大部分时间都被包含了。我不去看问题，错过了回答：看起来你可能可以将包含框上的css设置为溢出：隐藏，然后检查是否有元素溢出：也许你可以继续减少字体大小1直到没有溢出？是的，这是我的问题。我确实尝试了合计百分比，效果很好。我唯一能真正防止溢出发生的方法是将新字体大小减少大约7%。这似乎让它在大部分时间都被包含了。我不去看这个问题，错过了回答：看起来你可能可以将包含框上的css设置为溢出：隐藏，然后检查是否有元素溢出：也许你可以继续将字体大小减小1，直到没有溢出为止？