了解 CSS 行高

Understanding CSS line-height

为什么这两段的行高不同(至少在 Safari 和 Chrome on OS X 中)?默认行高不应该是 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>

我的 iOS 应用程序中嵌入了 HTML "web view",我想让用户控制行间距。我发现我需要使用 1.2、1.8 和 2.4 之类的值来表示单倍间距、一倍半倍间距和双倍间距。任何小于 1.2 的值都会重叠。

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

所以第二个问题是,我如何在 运行 时间(假设它可能因设备而异)计算我需要乘以行间距以使行不重叠的软糖因子?还是 1.2 a "rule" 我可以假设永远是真的?

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

normal Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family. mdn link

事实证明,将line-height设置为1.0意味着"slightly overlap the line above when writing each line"。为了避免这种情况,世界上的每个 Web 设计者都必须对 line-height 进行调整以猜测世界上每个浏览器将要做什么,而不是少数浏览器编写者使他们的软件在第一名。

编辑:进一步的研究表明,如果您使用选定的字体系列和大小创建 UIFont,则可以通过除法获得要使用的确切行高乘数UIFont lineHeight 属性 由 pointSize 属性。这在网站上没有多大用处,但当您拥有问题中描述的集成网络视图时,它会很好用。