Why does "font" ignore "line-height" in CSS while "font-size" doesn't?

Question

I experienced a very weird behavior. Why does test2 ignore line-height while test1 works fine? (the background-color is just to identify the containers better)

body {
    line-height:0.8;
}

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

live demo: http://jsfiddle.net/tHUeg/4/

Answer 1

font is a shorthand property, and using it nukes any specific properties that make it up. Since line-height is included in font (usually seen as 24px/0.8 Arial,sans-serif), it is reset to its default value.

Answer 2

font includes line-height so it is overridden to the default.

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