5

我有一个 h1 我想适应视口的整个宽度,它由等宽字体的13 个字符组成。在阅读了关于视口大小排版的CSS-Tricks文章之后,如果我想实现这一点,我只需将 h1 的样式设置为:

h1 {
    font-size: 13vw;
    font-family: monospace;
}

然而,这会留下一些空间(突出显示文本以查看空白):

(这里会有一张图片,但我没有足够的代表,所以点击这里查看 JSFiddle)

我试过其他尺寸,font-size: 14vw;有点偏大,font-size: 13.99vw;看起来刚刚好,但奇怪font-size: 13.999vw;的是还是太大了?

有人可以解释这里发生了什么吗?为什么等宽字体中 13 个字符长度的字符串中的每个字符都需要超过(100/13)% 的视口宽度才能适应整个视口宽度?

4

2 回答 2

3

在开始之前,我只想说,由于我在对 Stoyan Dekov 的回答的评论中提出的问题,我不会给你一个解决方法。相反,我只会回答您的问题,有人可以解释这里发生了什么吗?

font-size!=width

这里的问题是您假设font-sizewidth. 它不是。CSS 字体模块定义font-size为:

...从字体中想要的字形高度。

这意味着与相比font-size更具有可比性。heightwidth

这也不是特定于vw单位的。如果您指定 afont-size以像素为单位,您还会注意到计算的width不匹配font-size.

但即便如此,这一切都取决于font-family你使用的是哪一个,正如同一段继续说的那样:

对于可缩放字体,字体大小是应用于字体的 EM 单位的缩放因子。(请注意,某些字形可能会溢出到它们的 EM 框之外。)对于不可缩放的字体,字体大小被转换为绝对单位,并与字体的声明字体大小相匹配,两者使用相同的绝对坐标空间。匹配的值。

这里的关键词是可扩展的和不可扩展的

即使使用了不可缩放的字体,13vw也不会反映每个字符的宽度。这永远不会适用于vw,但它可能适用于,vh但前提是每个单独字符的宽高比与屏幕的宽高比匹配。

于 2015-07-15T10:37:20.130 回答
2

问题是如果文本与父容器的大小完全相同,它将跨越第二行。

body {
    margin: 0;
    width:100px
}

h1 {
    font-family: monospace;
    width:100px;
}

这将导致文本进入新行,因为它们都是 100 像素。这就是为什么 14vw 太大了,但 13.99 就足够了:Fiddle DEMO

但是,您可以使用它text-align: justify;来实现您想要的。

看看这个Fiddle DEMO

于 2015-07-15T10:27:22.143 回答