CSS フォント
- 前のページ CSS テキストシェイディング
- 次のページ CSS フォントスタイル
あなたのウェブサイトに正しいフォントを選ぶことは重要です！
フォント選択が重要です
正しいフォントを選ぶことは、ウェブサイトのユーザーエクスペリエンスに大きな影響を与えます。
正しいフォントは、あなたのブランドに強力なイメージを作り出します。
読みやすいフォントを選ぶことは重要です。フォントはテキストに価値を追加します。フォントの色やテキストのサイズを選ぶことも重要です。
一般的なフォントファミリー
CSSには5つの一般的なフォントファミリーがあります：
- 線条フォント（Serif）- 各文字の端に小さな筆跡があります。形式感と優雅さを演出します。
- 無線条フォント（Sans-serif）- フォントのラインはシンプルです（細い線はありません）。現代的でシンプルな外観を演出します。
- 等幅フォント（Monospace）- ここでのすべての文字は同じ固定の幅です。機械的な外観を作り出します。
- 草書フォント（Cursive）- 人間の筆跡を模倣しています。
- 幻想フォント（Fantasy）- 装飾的/風変わりなフォントです。
すべての異なるフォント名は、これらの5つの一般的なフォントファミリーの1つに属しています。
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;
{}
- 前のページ CSS テキストシェイディング
- 次のページ CSS フォントスタイル
