4

我最近遇到了@font-familyCSS 规则，因为我想在我的网站上使用网络字体。

说到重点，我在@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');
}

这是另一个：

@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。那么，这两个错误之一是错误的吗？（只是想确认一下，尽管两者都是非常可靠的来源。）

如果可以接受，我会选择两者中的哪一个更好？

4

1 回答 1

2

第一个例子虽然令人难以置信，但却是正确的；请注意 Droid Serif Regular 是如何被声明为正常字体粗细和正常字体样式的……您希望如何显示常规字体。第二个声明，它调用 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/

于 2012-04-28T15:45:58.850 回答