使用字体大小时的css vw含义

Question

我的理解是，CSS中的"vw“单位指的是视口宽度的1%增量。

但是，当我创建一个单行字体，它应该是视口宽度的10%时，最后接近~6% (1/16)。。

<div style="width: 100%; background: green; color: white; font-size: 10vw; font-family: monospace;">
123456789012345670
</div>

如果我使用的字体不是单空格字体，它就没有那么糟糕了，但它仍然是关闭的：

<div style="width: 100%; background: green; color: white; font-size: 10vw; font-family: serif;" id="test8">
MMMMMMMMMMMMMMMMMMMM
</div>

我使用的"M“，因为这是典型的”最宽的字符“在任何字体。在这个案例中，我看到11个字符，因此每个字符都是视口宽度的9%。这一数字仍然下降了10%。

那是怎么回事？当使用字体大小时，特别是当每个字符具有相同的宽度时，"vw“实际上意味着什么？

Answer 1

指定字体大小描述em-square的大小。字体度量包括每个字形的预先宽度，这是与em-平方成正比的。是前进宽度(以及字母和字间距)的总和决定了一行上适合多少个字符。

例如，如果我们采用单一空间的字体，所有的字体都具有相同的前进宽度，即字体大小的1229/2048。

因此，如果字体大小为10 in，0字母和字间距，我们应该得到100 /(10x 1229/2048) = 16.66字符(或16个字符一旦截断)在一个行框中，与视口一样宽。

​

body {
margin:0;
font-size:10vw;
font-family:'Courier New';
word-break:break-all;
}

ABCDEFGHIJKLMNOPQRSTUVWXYZ

​