为什么字体大小在 CSS 中不等于宽度和高度？答案

【问题标题】：Why doesn't font-size equal width and height in CSS?为什么字体大小在 CSS 中不等于宽度和高度？
【发布时间】：2022-05-01 17:44:12
【问题描述】：

我有以下 HTML 代码：

<p id="main">
    H  
</p>

以及以下 CSS：

p {
  border-style: solid;
  border-color: black;
  border-width: 1em;
  font-size: 1em;
  height: 1em;
  width: 1em;
  padding: 0em;
}

为什么内容框的高度和宽度不等于字体大小。为什么字母 H 和边框之间有间隙，如下面的输出所示。

【问题讨论】：

标签： html css

【解决方案1】：

这是因为字体不是这样设计的。例如，字母a 在顶部包含相当多的空白块，嗯，同样的事情发生在那个 H 上。你可以在实际选择文本时看到它。 H 的形状不是构成字符的轮廓。它是由字体设计者定义的一个假想的盒子。

字体不仅仅是形状，它们是包含的形状。字体设计师会花时间考虑字体在多行上的外观，因此他们也会计算字体中的一些间距。

这会导致难以预测的类型，但更能抚慰眼睛的类型。这就是为什么许多字体会被调整为 look 恰到好处，但在数学上却并非如此。最好的例子是看看圆形字母实际上是如何从底部突出的，这仅仅是因为我们的眼睛认为它是错误的。这意味着您的盒子也不会从基线开始。

如果有帮助，请检查此图片（是的，有些东西可以调整，例如行高，但本质上，此图片向您展示了您认为拥有的盒子和实际存在的盒子）：

简而言之，字体设计为清晰易读且不易计算。

此链接已失效。 RIP，链接

只是补充一下，@Paulie_D 在 cmets 中有一个很好的说明这个问题，为了将来参考，看看它可能也很好：http://www.smashingmagazine.com/wp-content/uploads/2010/05/type-002.gif

【讨论】：