html - 字体简写的奇怪 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

当您使用简写属性时，任何未指定的值都会重置为默认值。

因此第一个示例更改了字体样式、字体变体和行高。尤其是行高可能会改变框的大小。