フォントファミリー

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 18/76。

CSSにおいて、font-familyプロパティは、HTML要素内のテキストの書体を指定するために使用されます。このプロパティを使用すると、テキストに使用したいフォントを優先順位に従ってリストアップできます。最初のフォントが利用できない場合、ブラウザはリスト内の次のフォントを使用し、同様の外観を維持します。

font-familyプロパティを使用するための基本的な構文は次のとおりです：

selector {
    font-family: font1, font2, generic-family;
}

font1, font2: 優先順位に従ってリストされた、優先フォントファミリー名です。font1 が利用できない場合、ブラウザは font2 を試行し、以降も同様に続きます。

generic-family: serif、sans-serif、monospace、cursive、または fantasy のような、総称フォントファミリー名です。これは、指定されたフォントがいずれも利用できない場合のフォールバックとして機能します。

フォントファミリー名を指定する際は、以下のガイドラインに従うことが重要です：

フォントファミリー名に空白が含まれる場合は、引用符で囲む必要があります（例："Times New Roman"、"Courier New"）。

複数のフォントファミリー名はカンマで区切る必要があります。

指定されたフォントがいずれも利用できない場合に、適切なフォールバックが確実に使用されるよう、リストの最後のオプションとして汎用フォントファミリーを含めるのが良い習慣です。

例えば：

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

チャレンジ

簡単

見出し (<h1>) と段落 (<p>) を含む HTML ドキュメントが与えられます。あなたのタスクは、font-family プロパティを使用してこれらの要素をスタイリングすることです。以下の手順に従ってください：

<h1> 要素をターゲットにする CSS ルールを記述します。font-family を "Times New Roman", Times, serif に設定してください。
<p> 要素をターゲットにする CSS ルールを記述します。font-family を Arial, Helvetica, sans-serif に設定してください。

チートシート

font-family プロパティは、テキストの書体を指定します。優先するフォントを順番にリストします。最初のフォントが利用できない場合、ブラウザは次のフォントを使用します。

基本構文:

selector {
    font-family: font1, font2, generic-family;
}

ガイドライン:

スペースを含むフォント名には引用符が必要です: "Times New Roman"
複数のフォントはカンマで区切ります
フォールバックとして汎用ファミリー（serif, sans-serif, monospace, cursive, fantasy）を含めます

例:

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

自分で試してみよう

<html>
<head>
    <title>Font Family</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>