CSS基礎 練習問題 35:CSSプロパティ:フォントの指定方法
複数のフォントを優先順位付きで指定し、最初のフォントが使用できない場合に次の候補を使うようにしたい場合、正しいCSSの書き方はどれか。
- font-family: "Arial", "Helvetica", sans-serif;
- font-family: "Arial" or "Helvetica" or sans-serif;
- font-family: "Arial" + "Helvetica" + sans-serif;
- font: "Arial", "Helvetica", sans-serif;
- font-family("Arial", "Helvetica", sans-serif);
正解と解説を見る
正解:font-family: "Arial", "Helvetica", sans-serif;
font-familyプロパティにはカンマ区切りで複数のフォント名を指定でき、先頭から順に利用可能なフォントが探されます。
【正解の理由】
font-family: "Arial", "Helvetica", sans-serif;のようにカンマで区切って複数指定すると、最初のフォントが利用できない環境では次の候補が順に試され、最後に総称ファミリー(sans-serifなど)にフォールバックします。
【不正解の理由】
• 「or」でつなぐ書き方:CSSの構文にorという区切り文字は存在せず、正しく解釈されない
• 「+」でつなぐ書き方:+はCSSセレクタの結合子であり、プロパティ値の区切りには使えない
• 「font: ...」:fontは複数のプロパティを一括指定するショートハンドだが、font-sizeなど必須項目を省略すると正しく機能しない
• 「font-family(...)」:font-familyは関数ではなくプロパティであり、括弧で値を囲む記法は存在しない