字体大小和行高设置，但更改字体仍然会使元素的高度发生变化

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足够好的程度（铬）。

我的情况是宽松的 - 像素差异不会打破我的设计，而只是我的节奏。在需要像素完美的情况下，使用字体和大小玩这种伏都教方法我不会感到安全...

如果任何人仍然可以解释所有这些数字来自哪里以及是什么使得实际差异在这里，那会很棒。