使用“ vw”获得100％宽度的标题

Question

我有一个h1我想适合视口的整个宽度，该视口由等宽字体中的13个字符组成。阅读有关视口大小的排版的CSS-Tricks文章后，如果要实现此目的似乎合乎逻辑，我只需要将h1的样式设置为：

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

但是，这是在渲染时留下了一些空间（突出显示文本以查看空白）：

我试过其他尺寸，font-size: 14vw;有点太大，font-size: 13.99vw;似乎刚刚好，但奇怪的font-size: 13.999vw;是仍然太大吗？

有人可以解释这里发生了什么吗？为什么等宽字体中的13个字符长的字符串的每个字符都需要大于（100/13）％的视口宽度才能适合整个视口宽度？

Answer 1

^{在开始之前，我只想说，由于我在对 Stoyan Dekov 的答案的评论中提出的问题，我不会为您提供解决方法。相反，我只会回答您的问题：有人可以解释一下这里发生了什么吗？}

`font-size`!=`width`

这里的问题是您假设font-size与相同width。事实并非如此。CSS 字体模块定义为font-size：

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

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

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

但即便如此，这一切都取决于font-family您所使用的，正如同一段继续说的那样：

对于可缩放字体，字体大小是应用于字体 EM 单位的比例因子。（请注意，某些字形可能会超出其 EM 框。）对于不可缩放字体，字体大小将转换为绝对单位并与声明的字体字体大小进行匹配，对两个字体使用相同的绝对坐标空间。匹配的值。

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

即使使用不可缩放的字体，13vw也不会反映每个字符的宽度。这永远不会与一起工作，但只有当每个单独字符的长宽比与屏幕的长宽比匹配时，vw它才可能工作。vh