在@font-face CSS规则中正确定义字体族名

Question

最近我在寻找如何在网站上使用Web字体时，发现了CSS规则中的@font-family。

言归正传，下面是@font-family CSS代码中的两个变体：

@font-face {
  font-family: 'Droid Serif'; /* NOTE THIS LINE */
  font-weight: normal; /* NOTE THIS LINE */
  font-style: normal; /* NOTE THIS LINE */
  src: url('DroidSerif-Regular-webfont.eot');
  src: url('DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
   local('Droid Serif'), local('DroidSerifRegular'),
   url('DroidSerif-Regular-webfont.woff') format('woff'),
   url('DroidSerif-Regular-webfont.ttf') format('truetype'),
   url('DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
}

@font-face {
  font-family: 'Droid Serif'; /* NOTE THIS LINE */
  font-weight: normal; /* NOTE THIS LINE */
  font-style: italic; /* NOTE THIS LINE */
  src: url('DroidSerif-Italic-webfont.eot');
  src: url('DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
   local('Droid Serif'), local('DroidSerifItalic'),
   url('DroidSerif-Italic-webfont.woff') format('woff'),
   url('DroidSerif-Italic-webfont.ttf') format('truetype'),
   url('DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg');
}

and this is another:

@font-face {
  font-family: 'DroidSerifRegular'; /* NOTE THIS LINE */
  font-weight: normal; /* NOTE THIS LINE */
  font-style: normal; /* NOTE THIS LINE */
  src: url('DroidSerif-Italic-webfont.eot');
  src: url('DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
   local('Droid Serif'), local('DroidSerifItalic'),
   url('DroidSerif-Italic-webfont.woff') format('woff'),
   url('DroidSerif-Italic-webfont.ttf') format('truetype'),
   url('DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg');
}

@font-face {
  font-family: 'DroidSerifItalic'; /* NOTE THIS LINE */
  font-weight: normal; /* NOTE THIS LINE */
  font-style: normal; /* NOTE THIS LINE */
  src: url('DroidSerif-Italic-webfont.eot');
  src: url('DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
   local('Droid Serif'), local('DroidSerifItalic'),
   url('DroidSerif-Italic-webfont.woff') format('woff'),
   url('DroidSerif-Italic-webfont.ttf') format('truetype'),
   url('DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg');
}

比较我已经注释的行和/* NOTE THIS LINE */ 第一个变体是由Google Web Fonts提供的，而第二个变体是由Font Squirrel提供的。那么，这两个中有一个是错误的吗？（只是想确认一下，尽管两者都非常可靠。）

如果可以接受，那么这两个中哪一个更好？

- its_me

---

我曾经被教导过，在font-family属性中绝对不要指定字体样式。但是，也有可能是我的知识已经过时了。 - Mr Lister

Answer 1

第一个例子，虽然难以置信，但是是正确的；请注意Droid Serif Regular被声明为字体粗细normal和字体样式normal...就像您期望正常字体显示一样。第二个声明调用Droid Serif Italic，并将其设置为font-style:italic; 这允许您在同一字体系列中使用多种字体。如果您想添加粗体字体，则应用相同的@font-face规则，只需更改font-weight:bold，同时保留font-style:normal并声明相同的字体系列。

FontSquirrel确实非常擅长呈现@font-face规则，实际上我在那里读到了这个技巧。惊讶的是它没有被实现。您可以在此处阅读更多信息：http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/

- albert