在@ font-face CSS规则中正确定义字体系列 [英] Properly defining font-family in @font-face CSS rules

问题描述

最近，当我想在网站上使用网络字体时，遇到了 @ font-family CSS规则。

I recently came across the @font-family CSS rule as I was looking to use web fonts on my website.

至此，我在@ font-family CSS代码中看到了两个变体，您可以在下面看到它们：

Coming to the point, I've seen two variants in @font-family CSS code, which you can see below:

@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');
}

比较我用 /发表的评论*注意此行* /

第一个变体是 Google Web字体，而第二个是 Font Squirrel 。那么，这两个错误之一吗？ （只是想确认一下，尽管两者都是非常可靠的来源。）

The first variant is by Google Web Fonts, while the second one is by Font Squirrel. So, is one of these two wrong? (Just wanted to confirm, although both are very reliable sources.)

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

If acceptable, which one of the two would I be better off with?

推荐答案

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

the first example, though hard to believe, is correct; notice how the Droid Serif Regular is being declared as font weight normal and font style normal...how you'd expect a regular font to be displayed. the second declaration, it's calling in Droid Serif Italic, and setting it to to font-style:italic; this allows you to use multiple fonts within a family. If you wanted to add a bold font, you'd apply the same @font-face rule except you'd change font-weight:bold, while leaving font-style:normal and declaring the same font family.

fontsquirrel在渲染@ font-face规则方面确实做得非常好，实际上我在那儿已经了解了这种技术。感到惊讶的是它没有被实施您可以在此处了解更多信息： http：//www.456bereastreet。 com / archive / 201012 / font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple /

fontsquirrel really does a great job with rendering @font-face rules, actually i've read about this technique there. surprised it's not being implemented. you can read more about this here: http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/

这篇关于在@ font-face CSS规则中正确定义字体系列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！