CSSフォント
Webサイトに適したフォントを選択することが重要です。
フォントの選択は重要です
適切なフォントを選択すると、読者がWebサイトをどのように体験するかに大きな影響があります。
適切なフォントは、ブランドの強いアイデンティティを生み出すことができます。
読みやすいフォントを使用することが重要です。フォントはテキストに付加価値を与えます。フォントの正しい色とテキストサイズを選択することも重要です。
汎用フォントファミリ
CSSには、5つの一般的なフォントファミリがあります。
- セリフフォントには、各文字の端に小さな線があります。それらは形式的で優雅な感覚を生み出します。
- サンセリフフォントにはきれいな線があります（小さなストロークは添付されていません）。それらは、モダンでミニマルな外観を作成します。
- 等幅フォント-ここでは、すべての文字の固定幅が同じです。それらは機械的な外観を作成します。
- 筆記体フォントは人間の手書きを模倣します。
- ファンタジーフォントは装飾的で遊び心のあるフォントです。
異なるフォント名はすべて、汎用フォントファミリの1つに属しています。
セリフフォントとサンセリフフォントの違い
注：コンピューター画面では、sans-serifフォントはserifフォントよりも読みやすいと見なされます。
いくつかのフォントの例
| Generic Font Family | Examples of Font Names |
|---|---|
| Serif | Times New Roman Georgia Garamond |
| Sans-serif | Arial Verdana Helvetica |
| Monospace | Courier New Lucida Console Monaco |
| Cursive | Brush Script MT Lucida Handwriting |
| Fantasy | Copperplate Papyrus |
CSSフォントファミリープロパティ
CSSでは、font-familyプロパティを使用してテキストのフォントを指定します。
注：フォント名が複数の単語である場合は、「TimesNewRoman」のように引用符で囲む必要があります。
ヒント：ブラウザ/オペレーティングシステム間の最大の互換性を確保するために、font-familyプロパティは「フォールバック」システムとしていくつかのフォント名を保持する必要があります。必要なフォントで開始し、汎用ファミリで終了します（他のフォントが使用できない場合に、ブラウザが汎用ファミリで同様のフォントを選択できるようにします）。フォント名はコンマで区切る必要があります。フォールバックフォントの詳細については、次の章を参照してください。
例
3つの段落にいくつかの異なるフォントを指定します。
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}