为什么设置为 80em 的等宽字体占用的文本少于 80 列？

Question

我正在尝试使网页上的某些文本看起来像 Gopherspace 中的页面。换句话说，最大 80 列的等宽字体。我认为如果字体是等宽字体并且我将包含元素的宽度设置为 80em，这会将它限制为完美的 80 列，因为每个字符在等宽字体中的宽度应该相同。

我添加的颜色只是为了更容易辨别换行的位置。

如果这适用于某些 browsers/computers 而不是其他人，这是我在我的计算机上看到的，即 Mac OS 上的运行 Firefox 65.0.1 10.14.3.

为什么这个 div 几乎是 80 列文本大小的两倍，我该如何解决？

.plaintext {
  background-color: black;
  font-family: monospace;
  width: 80em;
  font-size: 10px;
  border: 2px solid red;
  overflow-wrap: break-word;
}

.r { color: red; }
.o { color: orange; }
.y { color: yellow; }
.g { color: green; }
.b { color: blue; }
.i { color: indigo; }
.v { color: violet; }

<div class="plaintext">
  <span class="r">0123456789</span><span class="o">0123456789</span><span class="y">0123456789</span><span class="g">0123456789</span><span class="b">0123456789</span><span class="i">0123456789</span><span class="v">0123456789</span><span class="r">0123456789</span>
</div>

Answer 1

元素的字体大小（在 em 中测量）是字体的高度，而不是宽度。
（本来，"em"这个词指的是M的宽度，但是现在没有多少字体的M正好是1em的宽度了。）

解决方法是使用ch作为宽度的单位。在等宽字体中，1ch 是一个字符的宽度。在可变宽度字体中，1ch 是 0（零）字符的宽度。
见 official definition at the W3C or the more readable MDN version.

.plaintext {
  background-color: black;
  font-family: monospace;
  width: 80ch;      /* changed */
  font-size: 10px;
  border: 2px solid red;
  overflow-wrap: break-word;
}

.r { color: red; }
.o { color: orange; }
.y { color: yellow; }
.g { color: green; }
.b { color: blue; }
.i { color: indigo; }
.v { color: violet; }

<div class="plaintext">
  <span class="r">0123456789</span><span class="o">0123456789</span><span class="y">0123456789</span><span class="g">0123456789</span><span class="b">0123456789</span><span class="i">0123456789</span><span class="v">0123456789</span><span class="r">0123456789</span>
</div>

为什么设置为 80em 的等宽字体占用的文本少于 80 列？

Why is a monospace font set to 80em taking up less than 80 columns of text?

css

fonts

monospace