字體大小和行高設置，但更改字體仍然會使元素的高度發生變化

Question

我在Safari和Chrome中遇到以下問題。

body { 
 
    font-size: 15px; 
 
    line-height: 1.2; 
 
} 
 

 
body, .same-font { 
 
    font-family: Helvetica, sans-serif; 
 
} 
 

 
code { 
 
    font-family: Courier New, sans-serif; 
 
}

<ul> 
 
    <li>Without any code - 18px height.</li> 
 
    <li>With <code>code</code> - 20px height.</li> 
 
    <li>With <code class="same-font">code.same-font</code> - 18px height.</li> 
 
</ul>

運行上面代碼段和所述檢查器。您可以注意到，code元素沒有任何修改其font-size或line-height的東西，除了它繼承的body。

雖然它並不堅持繼承，因爲其包含的li的高度爲20px，不像其他人那樣......我不確定該高度是從哪裏來的，因爲code元素本身的高度的17px（這也是來歷不明）。

將正常/正文應用於code元素（如第三個列表項）時，它會像正常一樣回到18px。對我而言，這意味着它不是用戶代理對影響高度的code元素施加的任何其他屬性 - 僅限於font-family。

編輯：作爲參考，StackOverflow的樣式中的某些東西可以防止此行爲。下面的列表項都具有相同的高度：

• 一個
• two
• 三

編輯2：顯然不是。如果你改變自己的等寬字體爲Courier New，然後選擇相同問題會持續存在。

如何防止這種尺寸變化？即使該行中的字體不斷更改，您如何指定將使用的行高？

一個示例用例是一個垂直節奏的設計 - 每行的高度和元素使用的總高度應該是18px的倍數（即，如果使用該網格大小） - 一條20px行將拋出節奏。

Answer 1

我結束了通過簡單地用字體系列和大小調整，直到它爲我解決我自己的問題（在可接受的範圍內）：

body { 
 
    font-size: 15px; 
 
    line-height: 1.2; 
 
} 
 

 
body, .same-font { 
 
    font-family: Helvetica, sans-serif; 
 
} 
 

 
code { 
 
    font-family: Menlo, Courier New, sans-serif; 
 
    font-size: 0.9333em; /* 14/15 */ 
 
    line-height: 1.28571; /* 18/14 */ 
 
}

<ul> 
 
    <li>Without any code - 18px height.</li> 
 
    <li>With <code>code</code> - 18px height.</li> 
 
    <li>With <code class="same-font">code.same-font</code> - 18px height.</li> 
 
</ul>

爲什麼門羅？

我注意到StackOverflow使用了Menlo，並沒有這個問題。當我嘗試它時，它也解決了這個問題，但是該字體不是在Windows中構建的。

因此，簡單地使用Menlo解決了Mac上的問題，並沒有改變Windows上的任何東西。

爲什麼不同font-size？

當Menlo被使用時，不同的大小不會改變任何東西（除了字體大小......） - 它仍然堅持行高，所以Mac都很好。

但是這個font-size與Courier結合在Windows上的新的回退不知何故也得到了它堅持的線高度！

如果我使用14px而不是0.9333em，它仍然可以正常工作，但如果我使用18px代替line-height而不是1.28571，則無法工作。這並不妨礙我，因爲我在設計中使用相對值。

所以...

與宋體後備使用不同的字體大小組合的門洛帕克字體努力解決我的問題在Mac（Safari和Chrome）和Windows足夠好的程度（鉻）。

我的情況是寬鬆的 - 像素差異不會打破我的設計，而只是我的節奏。在需要像素完美的情況下，使用字體和大小玩這種伏都教方法我不會感到安全...

如果任何人仍然可以解釋所有這些數字來自哪裏以及是什麼使得實際差異在這裏，那會很棒。