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

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

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