CSS フォント

ウェブサイトで適切なフォントを選ぶことは重要です！

フォント選択の重要性

適切なフォントを選ぶことは、読者がウェブサイトをどのように感じるかに大きな影響を与えます。

適切なフォントはブランドの強いアイデンティティを作り出すことができます。

読みやすいフォントを使用することも重要です。フォントはテキストに価値を加えます。また、フォントの色とテキストサイズを正しく選ぶことも重要です。

一般的なフォントファミリー

CSSでは、以下の5つの一般的なフォントファミリーがあります：

• Serif – 各文字の端に小さなストロークがあります。形式的でエレガントな印象を与えます。
• Sans-serif – クリーンなラインで、装飾のない現代的でミニマリスティックな外観を作り出します。
• Monospace – すべての文字が同じ固定幅です。機械的な外観を作り出します。
• Cursive – 人の手書きを模倣したフォントです。
• Fantasy – 装飾的で遊び心のあるフォントです。

すべてのフォント名は、これらの一般的なフォントファミリーのうちのどれかに属します。

SerifとSans-serifの違い

Serif と Sans-serif の違い

注：コンピューターの画面では、Sans-serif フォントの方が 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プロパティが使われます。

注：フォント名が複数語の場合は、”Times New Roman” のように引用符で囲む必要があります。

ヒント：font-familyプロパティは複数のフォント名を「フォールバック」システムとして保持するべきです。これにより、異なるブラウザやオペレーティングシステム間で最大限の互換性が確保されます。最初に望むフォントを指定し、最後に一般的なファミリー名を記述します（もし他のフォントが利用できない場合にはブラウザが代替フォントを選ぶため）。フォント名はコンマで区切ります。フォールバックフォントについての詳細は次の章で説明します。

例

.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}