Question

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

这是一个妙语：声明line-height: normal的效果不仅因浏览器不同而有所不同 - 事实上，量化这些差异是整个点 - 但它们也因一种字体而异面对另一个，也可以在给定的面孔内变化。

在我的情况下，我发现添加一些Unicode符号，例如信封符号“✉”，如果line-height设置为normal，则会更改行块高度。设置line-height: 1.2;可以解决问题。

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

Answer 1

原则上，normal的{{1}}值（通过默认或显式设置）是“正常”：浏览器应使用适合所用字体的值。这种变化不应该是一个惊喜：它隐含在definition。

中

这应该有助于解决这样的问题：你声明line-height，但你不知道每台计算机中哪些特定字体（如果有的话）可用，或者默认的sans-serif是什么字体可能是。这些字体可能需要不同的线条高度，以获得良好的外观。浏览器知道它正在使用哪种字体，因此它可以从内部表中获取它的行高。

实际上，浏览器可能无法很好地选择值;它往往有点太小。在排版方面，应根据几个考虑因素选择行高，不仅是字体，还有文本类型（例如，带有许多变音符号的文本需要更大的行高），尤其是度量（列宽，线长）：长线需要更大的线高。

所以一般来说，设计师最好设定线高，同时适当考虑不同的方面。

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

这是混合字体时导致行间距不均匀的原因。重要的不是字形的高度，而是字体的行高。例如，在Cambria Math字体中添加仅仅句点“。”（如果可用）会导致较大的行间距 - 除非您将font-family: a, b, c, d, sans-serif设置为特定值。

Answer 2

是否有任何理由使用line-height：normal;

是 - 该属性在那里，所以你可以使用它，当你特别需要将行高重置为浏览器默认值，以防你在父元素上设置它。

为什么以及何时你想要这样做取决于你正在实施什么以及你是否关心交叉浏览器像素完美设计。

Answer 3

“normal”是“line-height”的默认值。您明确声明line-height：normal to over-ride。

示例：

h1 {
    line-height: 150%;
}

h1.normal {
    line-height: normal;
}

如果你看一下上面的代码片段，我已经为h1标签声明了150％的行高。在案例中我希望特定的h1标签行为正常[浏览器特定的行高]，然后我使用“普通”覆盖它

正常行高在不同浏览器上有所不同