使用百分比和分数的 CSS 字体声明？

Question

body {
    font: 90%/1.6 baskerville, palatino, 'palatino linotype', georgia,serif;
}

我试图理解“90%/1.6”在此声明中的含义。我知道 90% 请求显示 90% 的视口(viewport)，但不确定 1.6 如何影响它以及为什么需要它。

非常感谢任何帮助。

Answer 1

回答

正如@DarrenKopp 评论的那样:

font: 90%/1.6

是以下内容的简写:

font-size: 90%
line-height: 1.6

这意味着:

The font-size is 90% of that of the parent element of ‘body’ (i.e. the ‘html’ element).

The line-height is this font-size multiplied by 1.6

文档和进一步解释

这记录在 CSS 2.1 Specification 中，第 15.8 节，速记字体属性:

[ [ <'font-style'> || <'font-variant'> || <'font-weight'>]? **<'font-size'>** [ **/ <'line-height'>**]? <'font-family'>] | caption | icon | menu | message-box | small-caption | status-bar | inherit

该部分中最相关的示例是:

p { font: normal small-caps 120%/120% fantasy }

这解释了字体大小:

…the 'font-size' (120% of the parent's font), the 'line-height' (120% times the font size…)

查阅关于line-height 的部分表明这可以表示为:

normal | <number>| <length> | <percentage> | inherit

并将数解释为:

The used value of the property is this number multiplied by the element's font size