CSS セレクターは Web ブラウザーに対して、テキストに使用するフォントの太さやスタイルを指示するだけでなく、使用している Web フォントをどこに適用するかを指示します。

CSS での font-family 名の使用

Web プロジェクトページには、プロジェクト内の各フォントの CSS font-family 名に加え、各フォントの太さとフォントスタイルを示す数値が表示されます。ドキュメントに埋め込みコードを追加した後は、これらの font-family 名を CSS 内で使用して、テキストにフォントを適用します。例えば、次のように指定します。

h1 {
  font-family: "proxima-nova", sans-serif;
}
CSS でのフォントファミリー名の使用

フォールバックフォントの指定

ユーザーのブラウザーで Web フォントがサポートされていない場合や、何らかの理由で Web フォントを読み込めない場合は、CSS スタックのフォールバックフォントが代わりに使用されます。

フォントスタックには、複数のプラットフォームで一様に使用可能な 1 つ以上のフォールバックフォント(Georgia、Arial など)と、それに続く汎用的な font-family 名(serif、sans-serif など)を含める必要があります。最初のフォントがブラウザーで見つからない場合は、2 番目のフォントが使用されます。以降も同様です。

複数の太さとスタイルの使用

CSS で数値の font-weight 値を使用すると、「normal」や「bold」以外の太さを指定できます。よく使用される数値とそれに対応する太さを次に示します。

  • 100 = thin
  • 200 = extra-light
  • 300 = light
  • 400 = normal, book
  • 500 = medium
  • 600 = demi-bold
  • 700 = bold
  • 800 = heavy
  • 900 = black

Web プロジェクトページでは、プロジェクトに含まれるすべてのフォントの数値を確認できます。

CSS での太さとスタイルの使用

例えば、h1 要素にフォントの太さ 100 を適用するには、次の CSS を使用します。

h1 {
  font-weight: 100;
}

Internet Explorer 8 でのバリエーション固有の名前の使用

Internet Explorer 8 で読み込まれる太さは、1 つのファミリーにつき最大で 4 つです。また、密接に関連する 2 つの太さ(例えば、400 と 500)を使用すると、1 つの太さしか正しく読み込まれない場合があります。Adobe Fonts では、この 2 つのバグに対処するために、このバージョンのブラウザーに対してバリエーション固有の font-family 名を提供します。

バリエーション固有の名前は、必要に応じて font-family スタックの先頭(メインのファミリー名の前)に追加してください。

#post-title {
  font-family: "proxima-nova-n6","proxima-nova", sans-serif;
  font-style: normal;
  font-weight: 600;
}

この名前は、通常の font-family 名と、それに続くダッシュおよびフォントバリエーション記述(FVD)で構成されます。例えば、標準の太さ 600 のフォントを含む proxima-nova のバリエーション固有の名前は proxima-nova-n6 になります。

バリエーション固有の名前はこの問題が発生しないブラウザーでは定義されないので、それらのブラウザーではスタック内の 2 番目にある完全なファミリー名が使用されます。

ほとんどのユーザーは、このような追加の font-family 名を使用する必要はありません。具体的には、Internet Explorer 8 でフォントが適切に表示されない問題が発生する場合にのみ、この名前を追加する必要があります。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー