CSS中使用vw单位时，与font-size配合使用的含义是什么？

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”一起使用时，“vw”实际上意味着什么，特别是当每个字符都有相同的宽度时?

- Michael

---

看一下字体文件。可能字母不像你用于相同像素大小的其他字体那么大。这是一个常见的“问题”，不同的字体需要不同的像素大小才能看起来像它们是相同的大小。 - ElChupacabra

你是否考虑了字符之间的 letter-spacing？ - sn3ll

Answer 1

指定字体大小描述了 em 方格的大小。字体度量包括每个字形的推进宽度，其与 em 方格成比例。它是推进宽度（以及字母和单词间距）的总和，决定了一行可以容纳多少个字符。

例如，如果我们采用等宽 Windows Courier New 字体，则所有字形具有相同的推进宽度，即字体大小的 1229/2048。

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

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

ABCDEFGHIJKLMNOPQRSTUVWXYZ

- Alohci