为什么“font”忽略CSS中的“line-height”，而“font-size”却没有？

Question

我经历了一种非常奇怪的行为。为什么test2忽略行高，而test1工作正常？ （背景颜色只是为了更好地识别容器）

body {
    line-height:0.8;
}

.test1 {
    background:#fdf;
    font-size:24px;
    font-family:Arial,sans-serif;
}
.test2 {
    background:#ffd;
    font:24px Arial,sans-serif;
}

现场演示：http://jsfiddle.net/tHUeg/4/

Answer 1

font是一个速记属性，使用它可以破坏构成它的任何特定属性。由于line-height中包含font（通常被视为24px/0.8 Arial,sans-serif），因此会将其重置为默认值。

Answer 2

font包含line-height，因此会被覆盖为默认值。

https://developer.mozilla.org/en-US/docs/Web/CSS/font