将不同字体保持在固定宽度内的一行答案

【问题标题】：Keeping different fonts on one line within a fixed width将不同字体保持在固定宽度内的一行
【发布时间】：2009-08-30 01:41:06
【问题描述】：

我正在制作一个非常基本的网页，由固定宽度内的一些文本组成。这是一些示例html

<div id ="wrap">
    <h1>An Annoying Heading</h1>
    <p>Some text some text some text some text some text some text some text some text some text some text</p>
</div>

这是body标签中唯一的东西。 CSS是

*{
  padding: 0;
  margin: 0; 
}    
#wrap{
  width: 320px;
  margin: 50px auto;
}
body{
  font-family: calibri,tahoma,arial,sans-serif;
}
p{
  text-align: justify;
  font-size: 12pt;
  padding-top: 0.4em;
}
h1 {
  padding-bottom: 0.1em;
  font-size: 26pt;
}

我希望标题占据可用的全部宽度。

我可以指定字体的大小来大致匹配 div 的宽度，这通常可以正常工作。

但是，如果浏览器不能使用 calibri，它会查看字体系列来决定改用什么。令人讨厌的是，下一个字体显示为比 calibri 更大的尺寸，并且标题被分成两行而不是一行。

有没有办法确保标题占据可用的全部宽度并保持在单行上，而与使用的字体无关？

【问题讨论】：

标签： html css

【解决方案1】：

主要的答案是您的字体堆栈应该反映您的需求：一组字体在一行中占用的空间量大致相同。您可以进行一些测试并调整您的堆栈。

另一种选择是找到一个中间大小，然后添加text-align: justify; 以流畅的方式将内容分散开来。

【讨论】：

是的，我也开始考虑选择不同的字体。干杯。

【解决方案2】：

您可以使用一些 JS 库（例如 jQuery）来确定最大字体大小，并为包含较小文本的容器设置它。因此，您将以不同字体的单个相同大小的行结束，或者您也可以动态更改字体。

【讨论】：

感谢您的提示。如果可能的话，我更喜欢用 CSS 来做。

【解决方案3】：

我认为当前没有任何 CSS 工具可以调整字体大小以适应固定宽度，因此我认为您需要使用 JavaScript 解决方案。以下问题似乎包含了实现它所需的所有信息：

How can you measure the space that a text will take in Javascript?

【讨论】：