当CSS line-height属性设置为时,我观察到一些相当不一致的HTML页面呈现行为normal.我还发现了Eric Meyer的博客文章,其中line-height: normal;讨论了不同的不一致之处,这里只是一个引用:
这是一个妙语:声明的效果
line-height: normal不仅在浏览器之间有所不同,这是我所预期的 - 事实上,量化这些差异是整个点 - 但它们也从一个字体到另一个不同,并且也可以在给定的范围内变化面子.
在我的情况下,我观察到添加一些Unicode符号,例如包络符号"✉",如果line-height设置为,则更改行块高度normal.设置line-height: 1.2;修复了问题.
我的问题是:有什么理由可以使用line-height: normal;吗？它表现得如此不可预测.
原则上,一个normal用于值line-height(通过默认,或者通过显式设定)为"正常":浏览器预计将使用一个值,该值是适合的字体被使用.这种变化不应该是一个惊喜:它隐含在定义中.
这应该有助于解决这样的问题:您声明font-family: a, b, c, d, sans-serif,但您不知道每台计算机中哪些特定字体(如果有)可用,或者默认的sans-serif字体可能是什么.这些字体可能需要不同的线条高度,以获得良好的外观.浏览器知道它正在使用哪种字体,因此它可以从内部表中获取它的行高.
在实际方面,浏览器可能无法很好地选择值; 它往往有点太小.在排版方面,应根据几个考虑因素选择行高,不仅是字体,还有文本类型(例如,带有许多变音符号的文本需要更大的行高),尤其是度量(列宽,线长):长线需要更大的线高.
所以一般来说,设计师最好设置线高,同时适当考虑不同的方面.
这也避免了您描述的问题:当一行包含来自不同字体的字形时,每种字体可能具有与之关联的不同默认行高.例如,信封符号仅包含在少数几种字体中,因此可能的情况是浏览器被迫从与您声明的字体不同的字体中提取它.
这是混合字体时导致行间距不均匀的原因.重要的不是字形的高度,而是字体的行高.例如,在Cambria Math字体中添加仅仅句点"."(如果可用)会导致较大的行间距 - 除非您设置line-height为特定值.