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

Question

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

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

一些额外的上下文 - 这是徽标的CSS,你可以在这个JS小提琴中看到.

具体来说,我很好奇:

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

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/