font-family プロパティは、ウェブページ上のテキストのフォントファミリー（書体）を指定するのに使用されます。
以下は font-family プロパティの使い方の例です。
これらの例は、font-family プロパティを使用して特定のフォントファミリーやフォールバックオプションを指定する方法を示しています。テキストのフォントを適切に設定して、ウェブページの外観をカスタマイズできます。
目次
特定のフォントファミリーを指定した使用例
|
1 2 3 4 5 |
p { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } |
この例では、”Helvetica Neue” フォントが利用可能であればそれを使用し、利用できない場合には “Helvetica”、”Arial”、最終的にはサンセリフ（sans-serif）フォントを使用します。
複数のフォントファミリーを指定した使用例
|
1 2 3 4 5 |
h1 { font-family: "Times New Roman", Times, serif; } |
“Times New Roman” フォントが使用可能であればそれを使用し、それが利用できない場合に “Times”、最終的にはセリフ（serif）フォントが使用されます。
デフォルトのフォントファミリーを指定した使用例
|
1 2 3 4 5 |
body { font-family: Arial, sans-serif; /* デフォルトのフォント設定 */ } |
これはページ全体のデフォルトフォントを指定します。
特定のセクションにフォントファミリーを指定した使用例
|
1 2 3 4 5 |
.special-section { font-family: "Courier New", Courier, monospace; } |
.special-section クラスを持つセクションに “Courier New” フォントを適用します。
複数のフォントファミリーの組み合わせを指定した使用例
|
1 2 3 4 5 |
h2 { font-family: "Georgia", "Palatino Linotype", "Book Antiqua", serif; } |
利用可能なフォントの中から選択肢がある場合、最初に一致するものが使用されます。
フォールバックフォントの指定した使用例
|
1 2 3 4 5 |
p { font-family: Calibri, "Gill Sans", sans-serif; } |
フォールバックフォントは、最初に指定されたフォントから順に評価され、利用可能な場合に使用されます。
シンプルなフォントファミリー指定した使用例
|
1 2 3 4 5 |
.logo { font-family: "Arial Black", sans-serif; } |
.logo クラスに “Arial Black” フォントを適用します。
システムフォントの指定した使用例
|
1 2 3 4 5 |
.code { font-family: monospace; } |
ブラウザが提供するデフォルトのモノスペース（等幅）フォントを使用します。
