CSS フォント指定一覧
説明： 本仕様一覧は、Mozilla Developer Network (MDN) https://developer.mozilla.org/ja/docs/Web/CSS/font-family の記事内容に基づき、CSSフォント属性に関する詳細なガイドを提供することを目的としています。フォントファミリー、ジェネリックフォントファミリー、フォント選択戦略などが含まれます。
一、font-family プロパティ
定義： font-family プロパティは、要素のフォントファミリーリストを指定します。ブラウザは、使用可能なフォントが見つかるまで、リスト内のフォントを順番に読み込もうとします。
構文：
font-family: [ <family-name> | <generic-family> ]#;
値：
<family-name>：「Arial」「Helvetica」「Times New Roman」などの具体的なフォント名。フォント名にスペースが含まれている場合は、「Times New Roman」のように引用符で囲む必要があります。<generic-family>：「serif」「sans-serif」「monospace」などのジェネリックフォントファミリー。#：カンマで区切って複数のフォントファミリーを指定できることを示します。
例：
font-family: "Times New Roman", Times, serif;
- ブラウザはまず「Times New Roman」フォントの読み込みを試みます。
- 「Times New Roman」フォントが使用できない場合は、「Times」フォントの読み込みを試みます。
- 「Times」フォントも使用できない場合は、「serif」ジェネリックフォントファミリーのデフォルトフォントを読み込みます。
二、 ジェネリックフォントファミリー
定義： ジェネリックフォントファミリーは、外観が似ているフォントのグループであり、特定のフォントが見つからない場合の代替手段を提供します。
一般的なジェネリックフォントファミリー：
| ジェネリックフォントファミリー | 説明 | 例 |
|---|---|---|
| serif | フォントのストロークの端に飾り線がある | Times New Roman、Georgia |
| sans-serif | フォントのストロークの端に飾り線がない | Arial、Helvetica |
| monospace | すべての文字の幅が同じ | Courier New、Consolas |
| cursive | 手書きを模倣したフォント | Brush Script MT、Lucida Handwriting |
| fantasy | 装飾性の高いフォント | Papyrus、Impact |
三、 フォント選択戦略
- ブラウザのデフォルトフォント： ブラウザやオペレーティングシステムによって、デフォルトのフォント設定が異なります。
- フォントのフォールバック：
font-familyプロパティを使用して複数のフォントを指定し、最後にジェネリックフォントファミリーを指定することで、特定のフォントが見つからない場合でも使用可能なフォールバックが確保されます。 - Webセーフフォント： Arial、Helvetica、Times New Romanなど、ほとんどのデバイスで使用できる一般的なフォントがあります。
- カスタムフォント：
@font-face規則を使用してカスタムフォントを読み込むことができます。
四、 その他の注意事項
- フォントの太さ：
font-weightプロパティは、フォントの太さを設定するために使用します。 - フォントスタイル：
font-styleプロパティは、標準、斜体、obliqueなどのフォントスタイルを設定するために使用します。 - フォントサイズ：
font-sizeプロパティは、フォントサイズを設定するために使用します。 - フォントの色：
colorプロパティは、フォントの色を設定するために使用します。
Q&A
-
Q： 特定のフォントが使用できない場合に備えて、代替フォントを指定するにはどうすればよいですか？
A：
font-familyプロパティで、カンマ区切りで複数のフォントを指定します。ブラウザは、リストの先頭から順に使用可能なフォントを探します。 -
Q： Webセーフフォントとは何ですか？
A： ほとんどのコンピュータやモバイルデバイスにインストールされている可能性が高く、Webページで安全に使用できるフォントのことです。例：Arial、Helvetica、Times New Romanなど。
-
Q： 独自のフォントをWebサイトで使用するにはどうすればよいですか？
A：
@font-face規則を使用して、独自のフォントファイルをWebサイトに読み込むことができます。その後、font-familyプロパティでそのフォントを指定します。