Question

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

说到这里，我在@ 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。那么，这两个中的一个是错的吗？（只是想确认，虽然两者都是非常可靠的来源。）

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

Answer 1

第一个例子虽然难以置信，但却是正确的;注意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/

Answer 2

我使用Google网络字体中的选项来使用 @进口选项。加载可能需要一些时间，但如果性能符合您的要求，您可以自己托管字体。至于Font Squirrel，我对它并不熟悉，但我会把它检查出来。

在@ font-face CSS规则中正确定义font-family

2 个答案: