使用“vw”获取 100% 宽度的标题

Question

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

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

然而，这会留下一点空间（突出显示文本以查看空白）：

(There would be an image here but I don't have enough rep so click here for the JSFiddle)

我试过其他尺寸，font-size: 14vw; 有点偏大，font-size: 13.99vw; 好像刚刚好，但奇怪的是font-size: 13.999vw; 还是偏大？

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

Answer 1

^{在我开始之前，我只想说，由于 Stoyan Dekov 的回答中的issues I've raised in comments，我不会给你一个解决方法。相反，我只会回答你的问题有人可以解释这里发生了什么吗？}

font-size != width

这里的问题是您假设font-size 与width 相同。它不是。 CSS Fonts Module 将font-size 定义为：

...字体中字形的所需高度。

这意味着font-size 与height 的可比性要高于width。

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

但即便如此，这仍然取决于您使用的是哪个font-family，正如同一段继续说的那样：

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

这里的关键词是scalable和non-scalable。

即使使用了不可缩放的字体，13vw 也不会反映每个字符的宽度。这永远不会与vw 一起使用，但它可能与vh 一起使用，但前提是每个字符的纵横比与屏幕的纵横比匹配。

Answer 2

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

body {
    margin: 0;
    width:100px
}

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

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

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

看看这个Fiddle DEMO。