【CSS】font-family の説明と使用例

font-family プロパティは、ウェブページ上のテキストのフォントファミリー(書体)を指定するのに使用されます。

以下は font-family プロパティの使い方の例です。

これらの例は、font-family プロパティを使用して特定のフォントファミリーやフォールバックオプションを指定する方法を示しています。テキストのフォントを適切に設定して、ウェブページの外観をカスタマイズできます。

目次

特定のフォントファミリーを指定した使用例

この例では、”Helvetica Neue” フォントが利用可能であればそれを使用し、利用できない場合には “Helvetica”、”Arial”、最終的にはサンセリフ(sans-serif)フォントを使用します。

複数のフォントファミリーを指定した使用例

“Times New Roman” フォントが使用可能であればそれを使用し、それが利用できない場合に “Times”、最終的にはセリフ(serif)フォントが使用されます。

デフォルトのフォントファミリーを指定した使用例

これはページ全体のデフォルトフォントを指定します。

特定のセクションにフォントファミリーを指定した使用例


.special-section クラスを持つセクションに “Courier New” フォントを適用します。

複数のフォントファミリーの組み合わせを指定した使用例


利用可能なフォントの中から選択肢がある場合、最初に一致するものが使用されます。

フォールバックフォントの指定した使用例


フォールバックフォントは、最初に指定されたフォントから順に評価され、利用可能な場合に使用されます。

シンプルなフォントファミリー指定した使用例


.logo クラスに “Arial Black” フォントを適用します。

システムフォントの指定した使用例


ブラウザが提供するデフォルトのモノスペース(等幅)フォントを使用します。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次