css - 使用 "vw"获取 100% 宽度的标题

Question

我有一个 h1 我想适应视口(viewport)的整个宽度，它由等宽字体的 13 个字符组成。看完CSS-Tricks关于视口(viewport)大小排版的文章从逻辑上讲，如果我想实现这一点，我只需将 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)% 的视口(viewport)宽度才能适应整个视口(viewport)宽度？

Answer 1

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

字体大小 != 宽度

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

...the desired height of glyphs from the font.

这意味着 font-size 与 height 比 width 更具有可比性。

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

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

For scalable fonts, the font-size is a scale factor applied to the EM unit of the font. (Note that certain glyphs may bleed outside their EM box.) For non-scalable fonts, the font-size is converted into absolute units and matched against the declared font-size of the font, using the same absolute coordinate space for both of the matched values.

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

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