这些CSS字体属性是什么意思？

Question

我从一个网站上抓了一些CSS，虽然我对基本的CSS有很好的理解，但我并不了解所有的样式/属性：

font: normal normal bold 36px/54px brandon-grotesque-n7, brandon-grotesque, sans-serif;

其他一些背景信息 - 这是徽标的CSS，您可以在 JS Fiddle 中看到。

具体来说，我很好奇：

• 为什么会说“正常的正常大胆”？
• 为什么字体大小有斜杠？
• 为什么列出了三种字体？

Answer 1

您所看到的是速记字体声明。它与编写以下内容基本相同：

font-family: brandon-grotesque-n7, brandon-grotesque, sans-serif;
font-size: 36px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 54px;

为什么会说“正常的正常粗体”？

这是font-style，后跟font-variant，后跟font-weight。另一个例子是italic small-caps bold。

为什么字体大小有斜杠？

这是font-size，后跟line-height。在您的示例中，font-size为36px，行高为54px。

为什么列出了三种字体类型？

这称为字体堆栈。浏览器将尝试按写入顺序使用这些字体。如果用户系统上的brandon-grotesque-n7不可用，则浏览器将回退到使用brandon-grotesque。如果不可用，它将使用系统的默认sans-serif字体。

一个有用的字体速记备忘单：

备忘单来源：http://www.impressivewebs.com/css-font-shorthand-property-cheat-sheet/

Answer 2

因此，这个问题的答案不在评论中。来自CSS-Tricks.com：

<强> CSS font: font-style font-variant font-weight font-size/line-height font-family;

使用 font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;