@ font-face CSSルールのfont-familyを正しく定義しています

Question

私は最近、自分のウェブサイトでウェブフォントを使用しようとしていたので、@font-family 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 */

最初の変種はGoogle Web Fontsで、もう1つはFont Squirrelです。だから、これら2つのうちの1つが間違っていますか？ （両方とも非常に信頼性の高い情報源ですが、確かに確認したいと思っています）

どちらの方が良いでしょうか？

Answer 1

最初の例は、信じがたいものの、正しいです。 Droid Serif Regularがどのようにフォントの太さの標準とフォントのスタイルとして宣言されているのか注意してください。普通のフォントがどのように表示されるのか。 2番目の宣言は、Droid Serif Italicを呼び出し、それをフォントスタイルに設定しています。イタリック体。これにより、ファミリ内で複数のフォントを使用することができます。太字のフォントを追加する場合は、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/

Answer 2

Googleウェブフォントのオプションを使用して、 @import オプションを使用します。読み込むには時間がかかるかもしれませんが、もしあなたが望むものがあれば、おそらく自分でフォントをホストすることができます。フォントリスについては、私はそれに慣れていませんが、私はそれをチェックします。