CSS：如何调整我的字体大小填充合理布局中的所有空间？

Question

如何使用CSS使我的文字看起来像下图？

Answer 1

首先，您需要使用单空格字体。你可以在Google Fonts找到一些相当漂亮的。图像中的字体是Ubuntu Mono。

其次，我们将使用Viewport Width或'vw'单元（如果您点击该链接，您会发现它得到了浏览器的良好支持）。您需要确保文本的顶行是您需要的宽度以适合宽度。这也意味着每一行都需要是它自己的元素。一些HTML示例：

<p style="font-size: 5vw;">How can I</p>
<p>Adjust my font size</p>
<p>to fill all the space</p>
<p>in a justified</p>
<p>layout?</p>

我们现在可以使用这个初始占位符，使用以下公式计算其余行的'vw'大小：

NewFontSize = BaseFontSize - (((NewLineNumberOfChars - BaseLineNumberOfChars) / NewLineNumberOfChars) * BaseFontSize)

我创建了this example来展示如何使用JavaScript以编程方式实现这一目标（我使用JQuery轻松实现）。它吐出的代码如下：

<p style="font-size: 5vw;">How can I</p>
<p style="font-size: 2.36842vw;">Adjust my font size</p>
<p style="font-size: 2.14286vw;">to fill all the space</p>
<p style="font-size: 3.21429vw;">in a justified</p>
<p style="font-size: 6.42857vw;">layout?</p>

应该注意的是，由于Google Chrome将所有字体大小舍入到最近的圆形像素（boo-hiss），因此它并不准确，它可以看起来很像，特别是在较小的尺寸上。