5

当 CSSline-height属性设置为normal. 我还发现了Eric Meyer 的一篇博客文章，其中讨论了不同的不一致之处line-height: normal;，这里仅引用一个：

重点是：声明的效果line-height: normal不仅因浏览器而异，这是我所预料的——事实上，量化这些差异才是重点——<em>但它们也会因字体不同而不同，而且也会有所不同在给定的面内。

在我的例子中，我观察到添加一些 Unicode 符号，例如信封符号“✉”，如果line-height设置为normal. 设置line-height: 1.2;解决了这个问题。

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

4

3 回答 3

6

原则上， （通过默认normal值line-height或显式设置）的值是“正常的”：浏览器应该使用适合所使用字体的值。这种变化应该不足为奇：它隐含在定义中。

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

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

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

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

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

于 2013-01-11T13:56:58.040 回答
1

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

是的 - 该属性在那里，因此您可以在您特别需要将行高重置为浏览器默认值时使用它，以防您已将其设置在父元素的某个位置。

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

于 2013-01-11T12:18:33.643 回答
0

“正常”是“行高”的默认值。您明确声明 line-height: normal 以覆盖。

例子：

h1 {
    line-height: 150%;
}

h1.normal {
    line-height: normal;
}

如果您查看上面的代码片段，我已经为 h1 标签声明了 150% 的行高。如果我希望特定的 h1 标签表现正常[浏览器特定的行高]，然后我使用“正常”覆盖它

确实，正常的行高在不同的浏览器上有所不同

于 2013-01-11T12:18:04.897 回答