@ font-face：異なるフォントウェイトのフォントファミリを1つだけ使用していますか？

Question

私が取り組んでいるウェブサイトには "Open Sans"というフォントを使用します。今私はそれを読み込むためにGoogle Webフォントを使用していますが、それは無作為に通常の400（あなたはhttp://www.google.com/webfonts/specimen/Open+Sansであなた自身でチェックすることができます）の代わりに太った700バージョンを使用し始めたとき、とにかく、@ font-faceに変更して自分でフォントをホストしたいと思いますが、わからないことがあります。 Google Webフォントを使用すると、すべての異なるウェイトに同じフォントファミリを使用できます。したがって、body要素にはこの規則が適用されます。

font-family： 'Open Sans'、sans-serif;

などがあり、軽、標準、太字のいずれかである必要があるかどうかによって、特定の要素のフォントウェイトが異なります。しかし、Font Squirrelによって生成された@ font-faceでは、 'OpenSansLight'、 'OpenSansRegular'などのように、それぞれの異なる体重に対して異なるフォントファミリを指定する必要があるようです。なぜですか？それを変更してCSS全体を変更する必要はありませんか？

ありがとうございます。

Answer 1

我々は、CDN経由でGoogleのフォントをロードするときは、「ソースコードのプロのためのすべてのフォントの太さを見ることができるように、それは基本的にすべての選択したフォントのオプション（追加の太字、大胆な、軽量化に）

をロードします"フォントが読み込まれます。

Googleからフォントをダウンロードすると、これは、選択されたすべてのオプションに対して異なるファイルを提供します。これは、読み込まれている不要なフォントを減らすことができます（Googleが単一のフォントを作成した場合、そのフォントに関連するすべてのフォントウェイトオプションを1つのファイルに入れる必要があります）。これにより、ファイルサイズが大きくなります。

これは、ファイルを個別にロードするのがよい理由です。しかし、それを「OpenSans Regular」という名前でロードする代わりに、例えば「OpenSans Bold」という名前でロードします。 「Open Sans」を使用して異なるフォントウェイトを割り当てることができます。 （ただし、それぞれのフォントウェイトのそれぞれのファイルを読み込みます）。

@font-face { 
 
    font-family: 'Source Code Pro'; 
 
    font-style: normal; 
 
    font-weight: 400; 
 
    src: local('Source Code Pro Font'), 
 
     url('/fonts/sourcepro.woff2') format('woff2'), 
 
     url('/fonts/sourcepro.woff') format('woff'), 
 
     url('/fonts/sourcepro.ttf') format('ttf'), 
 
     url('/fonts/sourcepro.eot') format('eot'); 
 
} 
 

 
@font-face { 
 
    font-family: 'Source Code Pro'; 
 
    font-style: normal; 
 
    font-weight: 800; 
 
    src: local('Source Code Pro bold'), 
 
     url('/fonts/source-b.woff2') format('woff2'), 
 
     url('/fonts/source-b.woff') format('woff'), 
 
     url('/fonts/source-b.ttf') format('ttf'), 
 
     url('/fonts/source-b.eot') format('eot'); 
 
}