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

【问题标题】：What do these CSS font properties mean?这些 CSS 字体属性是什么意思？
【发布时间】：2014-10-23 16:03:46
【问题描述】：

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

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

一些额外的上下文 - 这是用于徽标的 CSS，您可以在 JS Fiddle 中看到它。

我特别好奇：

为什么会显示“normal normal bold”？
为什么字体大小上有斜线？
为什么列出了三种字体类型？

【问题讨论】：

哪部分不明白？ developer.mozilla.org/en-US/docs/Web/CSS/font
刚刚更新了具体问题。
The slash meaning
brandon-grotesque-n7, brandon-grotesque, sans-serif 表示第一个字体选择是brandon-grotesque-n7，如果不可用则选择brandon-grotesque 如果其他都失败，则使用默认浏览器sans-serif 字体。
@misterManSam 很酷，谢谢你的信息......这是 2/3 下来

标签： css fonts font-size

【解决方案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;

为什么会显示“normal normal bold”？

这是字体样式，然后是字体变体，然后是字体粗细。另一个例子是italic small-caps bold。

为什么字体大小上有斜线？

这是字体大小后跟行高。在您的示例中，字体大小为 36 像素，行高为 54 像素。

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

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

字体速记的有用备忘单：

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

【讨论】：

【解决方案2】：

所以这个问题在 cmets 中没有答案。来自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;

【讨论】：