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

我正面临着一个定制内容管理系统设计的常见问题。“最适合”字体大小 - 如何测量句子宽度？

我经营一家小型网站设计公司，我经常需要为客户编制一个可编辑的网站。例如，页面顶部可能会有一个栏，用来宣传客户希望能够自行编辑的最新消息或交易。

我遇到的问题是他们经常写的太多，文本溢出。也许我的防守太过分了，但在这些情况下，我通常会私下责怪客户 - 当然他们会在更新文本后检查，认识到它不适合，并修改它，以便它可以做到？

无论如何，我想这是我的责任，使网站看起来不错，所以我一直在努力找到一种方法来使文本适合在一个固定大小的框。一种方法是，得到箱（通常是div）此CSS属性：

overflow: auto;

但有时这是不适合的，例如在上面，其中杆是只有一行高描述的示例。

我的问题（是的，我终于知道了）是如何自动更改字体大小以适应盒子？

在某些应用程序中（Powerpoint就是一个例子），你可以为字体大小选择一个“最适合”选项，应用程序选择一个允许文本精确匹配的大小。我基本上都在寻找一个CSS，JavaScript或PHP版本。

在此先感谢！

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

来源

2011-05-26 Nick Brunt

我感到你的痛苦！我们也有客户提供给我们的摘要，这些摘要对于分配区域来说太长了;对于一些客户来说，它显然甚至没有考虑到他们的文本可能太长。 :-)

我在你的情况下做的事情就像是什么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的匿名函数中。我相信你可以修改它以适应你的实现。

来源

2011-05-26 21:10:57 squidbe

这听起来很不错，谢谢。我试图让它使用jsFiddle工作，但按钮没有做任何事情，你能提供任何帮助吗？ http://jsfiddle.net/Cnkfn/ – 2011-05-26 21:22:25

啊，不用担心，现在已经修复了，我让全局函数绕过了jsFiddle的特质。这个解决方案非常完美，非常感谢！ http://jsfiddle.net/Cnkfn/1/ – 2011-05-26 21:30:59

还没有在HTML尝试这样做，但你可能循环，并检查scrollHeight财产，看它是否比预期更大，如果是这样设置字体的一个点小一点，并重复，直到scrollHeight是你所期望的。

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

来源

2011-05-26 18:56:20 dkamins

是的，我明白了你的观点，但是当用户加载页面之前，这个过程在物理上改变字体的大小吗？这不是很理想...... – 2011-05-26 18:58:27

你可以隐藏块并隐藏它，但有些浏览器不提供隐藏块的信息，所以我看到的解决方法是将它推送到'left：-10000px'（方式屏幕外），并在那里做。笨重。 – dkamins 2011-05-26 19:07:34

在他的情况下使用'visibility'会更好。 – Knu 2011-05-26 21:11:13

-5

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

来源

2011-05-27 12:06:23 David

我确实指定了CSS，JavaScript或PHP作为语言，而不是VB。 – 2011-05-27 12:43:43

使用HTML 5比......输入隐藏，你可以设置样式，字体等，然后获得宽度和高度。 – David 2011-06-01 12:08:52

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

回答

相关问题