CSS：如何调整我的字体大小填充所有的空间在对齐的布局？ [英] CSS: How can I adjust my font size fill all the space in a justified layout?

问题描述

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

How can I make my text look like the image below using CSS?

推荐答案

首先你需要使用单声道空格字体。您可以在 Google字体中找到一些非常漂亮的外观。图片中的字体是Ubuntu Mono。

First of all you need to use a mono-space font. You can find some pretty nice looking ones over at Google Fonts. The font in the image is Ubuntu Mono.

其次，我们将使用视口宽度或'vw'单位（如果您点击该链接，您会看到它被浏览器支持）。您需要确保文本的顶部行是您需要的宽度以适应宽度。这也意味着每一行都需要是它自己的元素。一些HTML示例：

Secondly, we are going to be using Viewport Width, or 'vw' unit (If you clicked the link, you'd see that it is well supported by browsers). You need to make sure the top line of text is the width you need it be to fit the width. This also means that each line needs to be it's own element. Some example 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'这些行使用以下公式：

We can now use this initial place-holder to work out the 'vw' size for the rest of the lines using the following formula:

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

我创建了这个例子，以显示如何使用JavaScript（我使用JQuery为了编程方便地实现）。它的代码如下：

I have created this example to show how this can be achieved programmatically with JavaScript (I used JQuery for ease). The code that it spits out is as follows:

<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 ），它不是精确的，它可以看看，特别是在较小的尺寸。

It should be noted that because Google Chrome rounds all font sizes to the nearest round pixel (boo-hiss), it's not exact and it can look off, especially at smaller sizes.

这篇关于CSS：如何调整我的字体大小填充所有的空间在对齐的布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！