4

@font-family最近、自分のWebサイトでWebフォントを使用しようとしていたときに、CSSルールに出くわしました。

要点を言えば、@ font-family CSSコードに2つのバリアントがあります。これは、以下で確認できます。

@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 */

最初のバリアントはGoogleWebFontsによるもので、2番目のバリアントはFontSquirrelによるものです。では、これら2つのうちの1つは間違っていますか？（どちらも非常に信頼できる情報源ですが、確認したかっただけです。）

許容できる場合、2つのうちどちらを使用したほうがよいでしょうか。

4

1 に答える 1

2

最初の例は、信じがたいことですが、正しいです。Droid Serif Regularが、フォントの太さの標準およびフォントのスタイルの標準としてどのように宣言されているかに注目してください...通常のフォントがどのように表示されると予想されるか。2番目の宣言は、Droid Serif Italicを呼び出し、font-style：italicに設定しています。これにより、ファミリ内で複数のフォントを使用できます。太字のフォントを追加する場合は、font-weight：boldを変更し、font-style：normalを残して同じフォントファミリを宣言することを除いて、同じ@font-faceルールを適用します。

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 に答える