- Adobe Fonts ユーザガイド
- はじめに
- フォントのライセンス
- フォントの入手と使用
- Creative Cloud アプリケーションでの Adobe Fonts の使用
- フォントの管理
- デスクトップアプリケーションでの見つからないフォントの解決
- InDesign でのフォントの使用
- フォントとタイポグラフィ
- HTML5 Canvas ドキュメントでの web フォントの使用
- InCopy でのフォントの使用
- Adobe Muse でフォントを使用する方法
- Muse での web フォントの使用
- フォントファイルのパッケージング
- トラブルシューティングガイド：フォントの追加
- 追加したフォントがフォントメニューに表示されない
- 「1 つ以上のフォントを追加できません」または「同じ名前のフォントが既にインストールされています」
- 現在使用しているフォントがフォントメーカーによって更新された場合
- Web デザインと開発
- Web サイトへのフォントの追加
- トラブルシューティングガイド：web サイトへのフォントの追加
- HTML 電子メールまたはニュースレターでの web フォントの使用
- Accelerated Mobile Pages（AMP）を使用した web フォントの使用
- CSS セレクター
- font-display settings を使用した web フォントのパフォーマンスのカスタマイズ
- 埋め込みコード
- ダイナミックサブセットと web フォント提供
- フォントイベント
- Web フォントが use.typekit.net から読み込まれるのはなぜですか。
- サイトが use.typekit.net に接続できない
- CodePen での web フォントの使用
- ブラウザーと OS のサポート
- ドメイン
- ローカル開発環境での web フォントの使用
- コンテンツセキュリティポリシー
- Web フォントの印刷
- 言語サポートと OpenType 機能
- フォント技術
CSS セレクターは Web ブラウザーに対して、テキストに使用するフォントの太さやスタイルを指示するだけでなく、使用している Web フォントをどこに適用するかを指示します。
CSS での font-family 名の使用
Web プロジェクトページには、プロジェクト内の各フォントの CSS font-family 名に加え、各フォントの太さとフォントスタイルを示す数値が表示されます。「プロジェクトを編集」をクリックすると、各プロジェクトの CSS の詳細が表示されます。
ドキュメントに埋め込みコードを追加した後は、これらの font-family 名を CSS 内で使用して、テキストにフォントを適用します。例えば、次のように指定します。
h1 {
font-family: "brandon-grotesque", sans-serif;
}
フォールバックフォントの指定
ユーザーのブラウザーで 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 プロジェクトページでは、プロジェクトに含まれるすべてのフォントの数値を確認できます。
例えば、h1 要素にフォントの太さ 700 を適用するには、次の CSS を使用します。
h1 {
font-weight: 700;
}
Internet Explorer 8 でのバリエーション固有の名前の使用
Internet Explorer 8 で読み込まれる太さは、1 つのファミリーにつき最大で 4 つです。また、密接に関連する 2 つの太さ（例えば、600 と 700）を使用すると、1 つの太さしか正しく読み込まれない場合があります。Adobe Fonts では、この 2 つのバグに対処するために、このバージョンのブラウザーに対してバリエーション固有の font-family 名を提供します。
バリエーション固有の名前は、必要に応じて font-family スタックの先頭（メインのファミリー名の前）に追加してください。
#post-title {
font-family: "brandon-grotesque-n7","brandon-grotesque", sans-serif;
font-style: normal;
font-weight: 700;
}
この名前は、通常の font-family 名と、それに続くダッシュおよびフォントバリエーション記述（FVD）で構成されます。例えば、太さ 700 のフォントを含む brandon-grotesque のバリエーション固有の名前は brandon-grotesque-n7 になります。
バリエーション固有の名前はこの問題が発生しないブラウザーでは定義されないので、それらのブラウザーではスタック内の 2 番目にある完全なファミリー名が使用されます。
ほとんどのユーザーは、このような追加の font-family 名を使用する必要はありません。具体的には、Internet Explorer 8 でフォントが適切に表示されない問題が発生する場合にのみ、この名前を追加する必要があります。
