コーススケジュール
Web サイトに適したフォントを選択することが重要です。
フォントの選択は重要です
適切なフォントの選択は、Web サイトのユーザー エクスペリエンスに大きな影響を与える可能性があります。
適切な書体は、ブランドの強力なアイデンティティを生み出すことができます。
読みやすいフォントを使用することが重要です。 フォントはテキストに価値を加えます。 フォントの正しい色とテキスト サイズを選択することも重要です。
一般的なフォント ファミリー
CSS には、次の 5 つの一般的なフォント ファミリがあります。
- セリフ フォント (Serif) - 各文字の端の周りに小さなストロークがあります。 フォルムとエレガンスの感覚を生み出します。
- サンセリフ (Sans-serif) - きれいな線 (小さなストロークがない) のフォントです。 モダンでミニマルな外観を作り出します。
- 等幅 (Monospace) - ここでは、すべての文字が同じ固定幅になります。 機械的な外観を作り出します。
- 筆記体フォント (Cursive) - 人間の手書きを模倣します。
- Fantasy - 装飾的で遊び心のあるフォントです。
さまざまなフォント名はすべて、これら 5 つの一般的なフォント ファミリのいずれかに属します。
Serif フォントと Sans-serif フォントの違い
ヒント: サンセリフ フォントは、コンピュータ画面ではセリフ フォントよりも読みやすいと考えられています。
いくつかのフォントの例
| 一般的なフォント ファミリー | フォント名の例 |
|---|---|
| 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 font-family プロパティ
CSS では、font-family プロパティを使用してテキストのフォントを指定します。
font-family 属性には、ブラウザ/オペレーティング システム間の互換性を最大限に確保するために、「フォールバック」システムとして複数のフォント名を含める必要があります。 必要なフォントから始めて、汎用ファミリーで終了します (他に利用可能なフォントがない場合は、ブラウザーに汎用ファミリーの類似のフォントを選択させます)。 フォント名はカンマで区切る必要があります。
注: フォント名が複数の単語である場合は、引用符で囲む必要があります (例: "Times New Roman")。
例
3 つの段落に異なるフォントを指定します。
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}