CSS：字體大小不准確嗎？

Question

因此， link和link給出了字體如何依賴於實現的提示。 在以下情況下，此問題非常特定於字體大小：

字體大小：50px； 將需要額外的空間來渲染（在我的情況下為 60px）

 div { height: 50px; font-size: 50px; background: green; } span { background: red; } .lineheight { line-height: 50px; }

 <p>Green is 50px, Red is not</p> <div><span>fg</span></div> <p>You can still see the overflow without span:</p> <div>jAaMgÁ</div> <p>line-height does not solve the issue (just makes it prettier)</p> <div class="lineheight"><span>jAaMgÁ</span></div>

• 我期望發生的是：em 正方形內的上升和下降
• 我得到的是：下降器被繪制在 em 廣場之外。
• 來自文檔鏈接： “字體大小對應於 em 方格”
• 從這個參考 em 正方形應該包括下降和上升：

那么為什么瀏覽器會做其他事情呢？ 我嘗試了 Firefox 和 Chrome，兩者似乎都與這種（錯過？）行為一致……規范是否發生了變化？ 如果是這樣，告訴瀏覽器字體高度（包括下行和上行）的適當方法是什么？

（寬度可以忽略，你可以自由使用CSS4，但感謝CSS3）

Answer 1

默認line-height高於font-size ，這就是為什么在您的示例中span高於 50px 的原因。 如果您將line-height設置為1或100% ，您會看到span與div具有相同的“真實”高度：50px。 “A”上的重音只是超過 100% 的行高並超出字體大小，作為補充/例外。

 div { height: 50px; font-size: 50px; line-height: 1; background: green; } span { background: red; }

 Green and Red are 50px high, with line-height 100%: <div><span>jAaMgÁ</span></div> The only thing that overflows is the accent on the "A" (and the very first letter "j", but to the left...): <div>jAaMgÁ</div>

Answer 2

這不是准確的。

CSS3 引入了一些允許 OpenType 字體的更改： link 。 但也改變字體大小的工作方式：

• CSS2 font-size : 字體大小對應 em 方格。
• CSS3 字體大小：字體大小是應用於字體 EM 單位的比例因子。

如果您的瀏覽器僅支持 CSS2，則 em 方格將與字體大小完全相同。

• 但是，通過支持 CSS3，大多數瀏覽器現在會將字體大小與字體的“em 單位”相乘，每個字體都不同，但總是 > 1。

• 結果，您將得到比預期更大的 em 平方，這是導致不准確的原因。

一個快速的骯臟解決方案是根據您的需要調整字體大小：

  font-size-adjust:0.4; //equivalent to 1:1 ratio

這將允許您在不更改字體大小的情況下更改字體“em 單位”，從而更改跨度高度。

 div { height: 50px; font-size: 50px; background: green; font-size-adjust:0.4; } span { background: red; } .lineheight { line-height: 50px; }

 <p>Green is 50px, Red is 50px too</p> <div><span>fg</span></div> <p>Combine with line-height for best results</p> <div class="lineheight"><span>fgjAaMgÁ</span></div>