在固定宽度内的一行上保留不同的字体

Question

我正在创建一个非常基本的网页，包含固定宽度内的一些文字。这是一些示例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>

这是身体标签内唯一的东西。 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，则会查看font-family以决定使用什么。令人讨厌的是，下一个字体显示为更大的尺寸，并且标题分为两行而不是一行。

有没有办法确保标题占用可用的全宽并且无论使用哪种字体都保留在一行？

Answer 1

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

Answer 2

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

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

Answer 3

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

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