CSS 字体和 'Display'

Question

在我的一生中，我找不到解释“显示”一词在以下 css 中的作用的文档:

h1 {
  font: 3em 'Display'  
}

根据这篇关于 css 字体属性的文章

http://www.impressivewebs.com/css-font-shorthand-property-cheat-sheet/

大小和字体系列是强制性的，否则将忽略该规则。

我以为它一定是内置字体系列之类的，但看看我创建的这个 bin:

http://jsbin.com/yuhaw/1/edit?html,css,output

HTML

  <h1 class="test1">font: 3em 'Display' </h1>
  <h1 class="test2">font: 3em</h1>
  <h1 class="test3">  font-size: 3em;font-family: 'Display' </h1>

CSS

h1.test1 {
  font: 3em 'Display'  
}

h1.test2 {
  font: 3em  
}

h1.test3 {
  font-size: 3em;
  font-family: 'Display'  
}

如果是这种情况，我希望 test1 和 test3 看起来相同，但它们并非如此。这是怎么回事？

Answer 1

在规则 h1 { font: 3em 'Display' } 中，'Display' 部分指定字体系列名称。这使得规则在语法上有效，而如果省略它，则规则在语法上无效并被完全忽略。在这里，系统是否真的有一个名为 Display 的字体系列并不重要。它可能不会，然后浏览器使用一些后备字体，通常是它的默认字体。

根据 font shorthand 的定义, 此规则将所有字体属性设置为它们的初始 值，除非在规则中为它们提供了值。因此，font-size 设置为 3em，font-family 设置为 Display，所有其他字体属性设置为它们的初始值CSS 规范中指定的值。对于 font-weight，初始值为 normal，因此该规则会覆盖将 font-weight 设置为 的常见推荐浏览器默认值>bold 表示 h1。

如前所述，规则 h1 { font: 3em } 被忽略(根据 CSS 规范和浏览器实践)，因此该元素以默认设置显示(以粗体显示，通常在 2em 大小)。

规则 h1.test3 { font-size: 3em; font-family: 'Display' } 有效并得到应用，但它仅影响它设置的两个特定字体属性。这意味着 font-weight 是 bold。

注意:继承与此无关。这只是在作​​者的样式表和浏览器的默认样式表中设置元素属性的问题。而这里的关键问题是 font 速记属性的效果。