Question

对于我的生活，我找不到解释单词＆＃39;显示＆＃39;在下面的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

它们不相同的原因是因为对于Test3，您继承了未明确设置的所有属性。保留每个现有的样式，您只需更改大小和系列。

因此，Test3是粗体，这是H1的浏览器默认样式。

Test1是一个完整的字体声明，并将每个未指定的属性重置为默认字体。这就是为什么Test1的字体权重为normal。通过指定“完整”字体声明来覆盖每个字体属性，因此将大小和族设置为指定值，并将权重重置为normal，这是字体的浏览器默认值。

在您的浏览器中（至少在Chrome中），您可以检查Computed style。在该视图中，您还可以查看View inherited properties。如果你在你的小提琴中这样做，你可以比较所有的字体属性，你会发现这些差异。

Answer 2

在规则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速记属性的影响。

Answer 3

你可以尝试一下。例如。 Google Chrome可帮助您使用该表示法查看计算出的样式。

element.style {
   font: 3em 'Display';
   font-family: Display;
   font-size: 3em;
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
   line-height: normal;
}

根据documentation，您可以使用以下表示法在一个声明中指定所有字体属性：

Answer 4

没有这样的字体命名＆＃34;显示＆＃34;

您必须将otf上传到您的网络服务器并以这种方式启用它：

@font-face {
  font-family: "Display";
  src: url("type/filename.eot");
  src: local("☺"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
  }

CSS字体和'显示'

4 个答案: