為什么CSS中的字體大小不等於寬度和高度？

Question

我有以下 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;
}

為什么內容框的高度和寬度不等於字體大小。 為什么像下面的output中字母H和邊框之間有空隙。

Answer 1

這是因為那不是字體的設計方式。 例如，字母a在頂部包含相當大的空白塊，嗯，同樣的事情發生在那個H.你可以在實際選擇文本時看到它。 H的形狀不是形成角色的輪廓。 它是由字體設計者定義的虛構框。

字體不僅僅是形狀，還包含形狀。 字體設計師花時間考慮字體在多行上的外觀，因此他們也會計算字體中的一些間距。

這導致類型的可預測性較低，但更適合於眼睛類型。 這就是為什么許多字體將被調整為看起來恰到好處，但數學上它們不是。 最好的例子是看看圓形字母實際上是如何從底部突出的，僅僅因為我們的眼睛看到它是錯誤的。 這意味着您的盒子也不會從基線開始。

檢查這個圖像是否有幫助（是的，有些東西可以像行高一樣調整，但實質上這個圖像顯示你認為你擁有的盒子和實際存在的盒子）：

在此輸入圖像描述

簡而言之，字體設計清晰易讀，不易計算。

只是添加，@ Paulie_D在這個問題的評論中有一個很好的例子，並且為了將來的參考它也可能是好的看看它： http ： //www.smashingmagazine.com/wp-content/uploads/2010 /05/type-002.gif

Answer 2

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

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

試試這個。