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

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，而不是像其他的 18...我不确定那个高度是从哪里来的，因为code 元素本身的高度为 17px(这也是来历不明)。

当 normal/body 应用到 code 元素时(就像在第三个列表项上)，它像正常一样回到 18px。对我而言，这意味着用户代理对 code 元素施加的任何其他属性都不会影响高度 - 只有 font-family。

编辑:作为引用，StackOverflow 样式中的某些内容可以防止这种行为。以下列表项都具有相同的高度:

• 一个
• 两个
• 三个

编辑 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 与 Windows 上的 Courier New 回退相结合，以某种方式让它也遵守了行高!

如果我使用 14px 而不是 0.9333em 它仍然可以正常工作，但是如果我使用 18px 作为 line-height 而不是 1.28571，它就不会工作。这并不困扰我，因为我在设计中使用相对值。

所以...

Menlo 字体与具有不同字体大小的 Courier New 回退相结合，在 Mac(Safari 和 Chrome)和 Windows(Chrome)上充分解决了我的问题。

我的情况很宽松——像素差异不会破坏我的设计，但只会破坏我的节奏。在需要像素完美的情况下，我不会对这种玩弄字体和大小的巫术方法感到安全......

如果有人仍然可以解释所有这些数字的来源以及是什么造成了这里的实际差异，那就太好了。