奇怪的CSS行为与字体速记

Question

<div class="timer">00:01:05</div>

以下css生成一个154x30px的框：

div.timer
{

    font: 700 24px Arial, Helvetica, sans-serif;
}

并且这个生成一个154x19px的框（在sam div元素上）。

div.timer
{
    font-weight: 700;
    font-size: 24px;
    font-family: Arial, Helvetica, sans-serif;
}

这怎么可能？我检查了速记属性，我找不到我做错了什么。我按照良好的顺序订购了属性，我很确定。

Answer 1

使用速记属性时，未指定的任何值都将重置为默认值。

所以第一个例子改变了font-style，font-variant和line-height。特别是线高可能会改变盒子的大小。