css - "line-height: normal;"是个坏主意吗？

Question

当 CSS line-height 属性设置为 normal 时，我观察到一些相当不一致的 HTML 页面呈现行为。我还找到了 blog post by Eric Meyer其中讨论了 line-height: normal; 的不同不一致，这里仅引用一个:

Here’s the punchline: the effects of declaring line-height: normal not only vary from browser to browser, which I had expected—in fact, quantifying those differences was the whole point—but they also vary from one font face to another, and can also vary within a given face.

在我的案例中，我观察到如果 line-height 设置为 normal，添加一些 Unicode 符号(例如信封符号“☉”)会改变行 block 高度.设置 line-height: 1.2; 解决了这个问题。

我的问题是:是否有任何理由使用 line-height: normal;？它的行为如此不可预测。

Answer 1

原则上，line-height 的 normal 值(通过默认设置或显式设置)是“normal”:浏览器应该使用一个值适用于正在使用的字体。这种变化不足为奇:它隐含在 definition 中.

这应该有助于解决这样的问题:您声明了 font-family: a, b, c, d, sans-serif，但您不知 Prop 体是哪种字体(如果有的话)在每台计算机上都可用，或者默认的 sans-serif 字体可能是什么。这些字体可能需要不同的行高，以获得良好的外观。浏览器知道它使用的是哪种字体，因此它可以从其内部表中为其选择行高。

在实践方面，浏览器可能无法很好地选择该值；它通常有点太小了。在排版方面，应​​根据几个考虑因素选择行高，不仅是字体，还包括文本类型(例如，带有很多变音符号的文本需要更大的行高)，尤其是度量(列宽， line length):长的行需要更大的行高。

所以一般情况下，设计者最好根据不同的方面来设置行高。

这也避免了您描述的问题:当一行包含来自不同字体的字形时，每种字体可能有不同的默认行高与之关联。例如，信封符号仅包含在少数字体中，因此浏览器很可能被迫从与您声明的字体不同的字体中选取它。

这就是混合字体时导致行间距不均匀的原因。重要的不是字形的高度，而是字体的行高。例如，仅添加句号“.”在 Cambria Math 字体中，如果可用，会导致巨大的行间距——除非您将 line-height 设置为特定值。