了解CSS line-height

时间:2015-11-26 04:26:35

标签: html css google-chrome safari wkwebview

为什么这两段之间的行高不同(至少在OS X上的Safari和Chrome中)?不应该默认行高为1.0,我将其解释为" natural"给定字体的高度(上面一行的下降部分不触及下面的线上升)?我发现如果我使用1.0,下行线会被下面的线切断(取决于字体)。

JSFiddle

<p style="font:14pt/1.0 Times">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus mi vel erat finibus, eu tincidunt vehicula quis eu odio. In vel nisi non odio consequat porta in eros, sit amet tincidunt nunc dictum eu. In rhoncus convallis dapibus.</p>
<p style="font:14pt Times">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus mi vel erat finibus, eu tincidunt vehicula quis eu odio. In vel nisi non odio consequat porta in eros, sit amet tincidunt nunc dictum eu. In rhoncus convallis dapibus.</p>

我有一个HTML&#34;网络视图&#34;嵌入在我的iOS应用程序中,并希望让用户控制行间距。我发现我需要使用1.2,1.8和2.4之类的东西,用于单个,一个半和双倍间距。任何小于约1.2的线条和线条重叠。

我发现了其他问题,其中1.2被描述为等同于normal,这看起来是正确的。

所以第二个问题是,如何在运行时计算(假设它可能因设备而异)我需要将线间距相乘的软糖因子,以使线不重叠?或者是1.2 a&#34;规则&#34;我可以假设永远是真的吗?

2 个答案:

答案 0 :(得分:0)

我相信它实际上是由于字体。字体系列可以根据其字符具有不同的行高。 Times的默认值不等于默认的sans-serif(浏览器默认值)。

  

<强>正常       取决于用户代理。桌面浏览器(包括Firefox)使用大约1.2的默认值,具体取决于元素的 font-family。 mdn link

答案 1 :(得分:-2)

事实证明,将line-height设置为1.0意味着“在写入每一行时略微重叠上面的行”。为了避免这种情况,世界上的每个Web设计师都必须对line-height进行调整,以猜测世界上每个浏览器将要做什么,而不是少数浏览器编写者使他们的软件正常工作第一名。

编辑:进一步研究表明,如果使用所选字体系列和大小创建UIFont,则可以通过除以{{1}来获得要使用的确切行高乘数} UIFont属性的lineHeight属性。这对网站没有多大好处,但是如果您有问题中描述的集成Web视图,它会很有用。