“最合适”的字体大小 - 如何测量句子宽度？

Question

我遇到了定制内容管理系统设计的一个常见问题。

我经营着一家小型网页设计公司，我经常需要为客户制作可编辑网站的某个区域。例如，页面顶部可能有一个栏，广告客户希望能够自己编辑的最新消息或交易。

我遇到的问题是他们经常写得太多，文本溢出。也许我有点过于防御，但在这些情况下，我通常会私下责怪客户——他们肯定会在更新文本后检查，发现它不合适，然后修改它以使其合适？

无论如何，我想让网站看起来更漂亮是我的责任，所以我一直在尝试找到一种方法，让文本适合固定大小的框。一种方法是给盒子（通常是div）这个css属性：

overflow: auto;

但有时这并不合适，例如在上面描述的示例中，条形图只有一行高。

我的问题（是的，我终于明白了）是如何使字体自动更改大小以适合框？

在某些应用程序中（例如 Powerpoint），您可以为字体大小选择“最适合”选项，并且应用程序会选择一个允许文本完全适合的大小。我基本上是在寻找它的 CSS、JavaScript 或 PHP 版本。

提前致谢！

编辑：这是解决方案 - http://jsfiddle.net/Cnkfn/1/

Answer 1

还没有在 HTML 中尝试过，但是您可以循环并检查 scrollHeight 属性，看看它是否比您预期的大，如果是，请将字体设置为小一点，然后重复直到 scrollHeight 是您的期待。

https://developer.mozilla.org/en/DOM/element.scrollHeight

Answer 2

我感受到你的痛苦！我们也有客户给我们的摘要对于分配的区域来说太长了；对于一些客户来说，他们显然没有想到他们的文本可能太长了。 :-)

在您的情况下，我所做的类似于 stackoverflow 所做的：在输入区域下方显示一个框，显示其文本更新 onkeyup。使用固定高度的框，当他们的文本太长时，他们会立即明白这一点。取而代之的是，您可以尝试以下方法：

<style>
#outer {
  width:100px;
  height:40px;
  overflow-x:hidden;
  overflow-y:auto; /* To make it obvious the text is too long. */
  border:1px solid red;
}
#inner {
  width:100px;
}
</style>

<div id="outer">
  <div id="inner" style="font-size:16px">
    Lorem ipsum dolor sit amet, dui orci interdum sagittis,
    proin metus dui, justo in suspendisse dolor.
  </div>
</div>
<button onclick="checkFontSize()">Check font size</button>

<script>
function checkFontSize() {
  var o = document.getElementById('outer');
  var i = document.getElementById('inner');
  var fs = parseInt(i.style.fontSize);
  while(i.offsetHeight > o.offsetHeight) {
    fs--;
    i.style.fontSize = fs + 'px';
  }
}
</script>

它检查内部 div 的高度是否大于外部 div 的高度；它的工作原理是假设内部 div 没有填充（您可以根据需要进行调整）。它将内部 div 的字体大小减小 1px，直到内部 div 的高度不再大于外部 div 的高度。

您可以在显示客户端文本的页面上包含这样的代码，在这种情况下，您可以将其包装在一个匿名函数中，该函数执行 ondomready。我相信您可以修改它以适合您的实施。

Answer 3

Public Function GetStringSize(ByVal Str As String, _
                                         ByVal FName As String, _
                                         ByVal FSize As Integer, _
                                         ByVal FStyle As System.Drawing.FontStyle) As System.Drawing.SizeF

 Using graphics As System.Drawing.Graphics = System.Drawing.Graphics.FromImage(New System.Drawing.Bitmap(1, 1))
     Dim size As System.Drawing.SizeF = graphics.MeasureString(Str, New System.Drawing.Font(FName, FSize, FStyle, System.Drawing.GraphicsUnit.Pixel))
     Return size
 End Using

End Function