CSSでfont-weightとbold font-familyの設定、どちらが正しいですか？

CSSでフォントを太字にするには、基本的に、font-family属性を使用する方法とfont-weight属性を使用する方法の2つの方法があります。

たとえば、Ralewayフォントを使用していて、cssを介してLight、Regular、Semibold、Boldのバリアントを読み込んだとします。h1{font-family: 'Raleway Bold'}またはに設定することで、単純な見出しを太字にすることができますh1{font-weight: 700}。

どちらがより正しいですか、またはどちらも同じですか？

次のような太字のフォントバリアントをロードしたとします。

@font-face {
  font-family: 'Raleway Bold';
  font-style: normal;
  font-weight: 700;
  src: url(path/to/font/raleway-bold.woff2) format('woff2');
}

両方font-familyとfont-weightスタイル仕様の両方を使用することを支持します。例えば：

h1 {
  font-weight: 700;
  font-family: 'Raleway Bold', Helvetica, Arial, sans;
}

どちらも基本的に同じことを行います。見出し1を太字にしてください。これは、大胆さなどを2倍にするのではなく、大胆にする必要があることを繰り返します。

この理由は非常に単純です。フォントファイルが読み込まれていない場合（サーバーの過負荷、クライアントの制限、ブードゥー教）、訪問者には引き続き太字のフォント（この場合は偽の太字のHelvetica）が表示され、タイトルを区別できます。と本文のみfont-family。これは、だけを指定した場合には当てはまりません。

この画像を見ると、一番上のセットはRalewayとRaleway Italicですが、適切なRaleway Italicがロードされています。

<link href='https://fonts.googleapis.com/css?family=Raleway:500,500italic' rel='stylesheet' type='text/css'>

底はRalewayのみを搭載しています。その結果、一番下のセットにはRalewayとFAUX Ralewayのイタリックが含まれています。小文字の "a"と "k"の違いに注意してください。たとえば、実際のイタリックと偽のイタリックです。適切に設計されたフォントには、通常のフォント、太字、およびイタリックの違いがあり、それらをロードしないと得られません。

どちらの方法でも正しい出力が得られますが、より正確な方法は、単一のフォントファミリを使用して、重みとスタイルのすべての異なるバリアントをグループ化することです。これは、システムフォント（「Arial」から「sans-serif」まで）を使用するのと同じ方法で、実際、Googleフォントを使用してRalewayをロードする場合は、単一のフォントファミリールートを使用します。

これが正しい方法であるいくつかの理由を概説しましょう。

CSSの複雑さ、最終的にはファイルサイズを削減

単一のfont-familyがあることは、フォントファミリーを含む要素全体を定義でき、異なるウェイト/スタイルの特定のエレメントのみを定義できることを意味します。たとえば、次のようにします。

html {
  font-family: Raleway;
}
.bold {
  font-weight: 700;
}
.italic {
  font-style: italic;
}
.footer {
  font-family: Arial;
}

<p>I'm raleway font, <span class="bold">and I'm raleway bold</span></p>
<div class="bold italic">I'm Raleway Bold Italic!</div>
<div class= footer>I'm <span class="bold">Arial Bold,</span> w/ the same class!</div>

このCSSがいかに素晴らしく、簡潔であるかに注目してください。.boldのfont-familyとして「RalewayBold」を指定する必要も、.italicの「RalewayItalic」を指定する必要もありませんでした。実際、クラスは単純に機能するため、太字および斜体のバリアントを指定する必要すらありません。さらに、.boldが.footer内にある場合、フッターコンテナーからArialを継承するだけなので、Ralewayではなく、Arialは太字になります。

これは、ブラウザが行う方法です。

上記は基本的に、最小限のスタイルとCSSの固有のカスケード特性を使用して、ブラウザーの内部スタイルシートがフォントを定義する方法です。

これは業界が行っている方法であり、実際に行っています。

最大のWebプロパティ、アプリケーション、およびパブリッシャーはすべて、この方法でそれを行います。Google、Facebook、NYT、ESPNなどはすべて、この方法でフォントを定義して使用します。

それだけでなく、CSSの前のユーザーインターフェイスやインターネットでさえ、単一のフォントファミリを指定し、太さとスタイルのさまざまな仕様に基づいてバリアントを選択します。Microsoft Word、KeyNote、Google Docs、さらには1990年代後半のWordPerfectをロードして、フォントドロップダウンを開きます。フォントファミリ名「Arial」が一覧表示されます。「Arial」、「Arial Bold」、「Arial Italic」などではありません。

Google Fontsからロードするだけです。

Google Fontsの無料のWebフォントリポジトリからRalewayをロードすると、Ralewayが単一のファミリ名で定義されていることがわかります。

https://fonts.googleapis.com/css?family=Raleway:400,400italic,500,500italic,700,700italic

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url(https://...Raleway-Regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url(https://...Raleway-Bold.woff2) format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 500;
  src: url(https://...Raleway-MediumItalic.woff2) format('woff2');
}
@font-face {
  font-family: 'italic';
  font-style: normal;
  font-weight: 700;
  src: url(https://...Raleway-BoldItalic.woff2) format('woff2');
}

これが問題です。CSS用にプログラムされたWebフォントであるRalewayについて質問すると、どちらの方法でも同じように機能します。この場合、font-weightを使用します。これは、コードに大きな変更を加えなくても、変更および制御が最も簡単な「正しい」一連のアクションだからです。

自分でフォントを埋め込むと、問題が発生し始めます。CSS用に必ずしも計画されていないフォントであり、重みが数字と一致しない場合があります。

このため、埋め込みフォントの非常に一般的なバグは、英語以外のフォントでは非常によくありますが、cssがフォントを自動的に「太字」または「明るく」し、結果が非​​常に悪くなります。

したがって、GoogleフォントのフォントのようなWebフォントを使用する場合は、先に進んでfont-weightの数値を使用することをお勧めしますが、自分でフォントを埋め込むときは、安全な側にとどまり、すべてのウェイトごとにfont-familyを使用することをお勧めします。