CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのfont-familyプロパティ完全ガイド！フォント指定の基本と実用例

CSSのfont-familyプロパティは、選択した要素に特定のフォントを適用するために使用します。ブラウザやOSによって利用できるフォントが異なるため、複数のフォントをカンマ区切りで指定し、代替フォント（フォールバック）を設定してWebセーフフォントを活用することで、クロスブラウザ間の互換性を確保するのがおすすめです。

font-familyプロパティの構文

CSSのfont-familyプロパティは、以下のような構文で記述します。

セレクタ {
    font-family: /*値*/;
}

フォント名にスペースが含まれる場合は、"Segoe Print"のようにダブルクォーテーションで囲みます。また、最後にserifやsans-serifなどの総称ファミリーを指定しておくと、どの環境でも意図に近い書体で表示されます。

使用例1：見出しと段落にフォントを指定する

次の例では、h2要素には「Magneto」、p要素には「Segoe Print」を第一候補として指定し、それぞれArialとserifをフォールバックとして設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
    background-color: thistle;
    font-family: "Magneto", Arial;
}
p {
    font-family: "Segoe Print", serif;
    font-size: 1.4em;
}
</style>
</head>
<body>
<h2>Learn Fortran</h2>
<p>Fortran, as derived from Formula Translating System, is a general-purpose, imperative programming language. It is used for numeric and scientific computing.</p>
</body>
</html>

表示結果

上記のコードをブラウザで開くと、次のように表示されます。環境に「Magneto」や「Segoe Print」がインストールされていない場合は、代替フォントが自動的に適用されます。

CSSのfont-familyプロパティ完全ガイド！フォント指定の基本と実用例

使用例2：テーブル要素にフォントを指定する

テーブルの各部分にも個別にフォントを指定できます。次の例では、th要素・td要素・caption要素にそれぞれ異なるフォントファミリーを設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
th {
    font-family: "Franklin Gothic Book", Arial;
    border: thin solid blue;
}
td {
    font-family: "Lucida Console", serif;
    font-size: 1.1em;
    box-shadow: inset 0 0 3px black;
}
caption {
    font-family: Broadway;
    font-size: 24px;
}
</style>
</head>
<body>
<table>
<caption>Demo Table</caption>
<tr>
<th>DEMO 1</th>
<th>DEMO 2</th>
</tr>
<tr>
<td>demo a</td>
<td>demo b</td>
</tr>
<tr>
<td>demo c</td>
<td>demo d</td>
</tr>
</table>
</body>
</html>

表示結果

このコードを実行すると、キャプション・見出しセル・データセルそれぞれに指定したフォントが反映され、次のように表示されます。

CSSのfont-familyプロパティ完全ガイド！フォント指定の基本と実用例

まとめ

font-familyプロパティを使えば、要素ごとに柔軟にフォントを指定できます。ポイントは以下の3つです。

  • フォント名にスペースがある場合はダブルクォーテーションで囲む
  • カンマ区切りで複数のフォントを優先順に指定する
  • 最後にserif / sans-serif / monospaceなどの総称ファミリーを必ず指定する

これらを守ることで、ユーザーの環境に左右されず、安定したタイポグラフィを実現できます。

  1. CSSのfont-variantプロパティとは？使い方と実例をわかりやすく解説

    CSSのfont-variantプロパティは、テキストの字形（グリフ）のバリエーションを指定するためのショートハンド（一括指定）プロパティです。このプロパティを使うことで、以下の個別プロパティの値をまとめて設定できます。font-variant-caps（大文字・小文字の字形）font-variant-numeric（数字の字形）font-variant-alternates（代替字形）font-variant-ligatures（合字）font-variant-east-asian（東アジア言語向けの字形）構文font-variantプロパティの基本的な書き方は次のとおりです。Selecto

  2. CSSのfont-sizeプロパティとは？フォントサイズの指定方法を実例付きで解説

    CSSのfont-sizeプロパティは、テキストのフォントサイズ（文字の大きさ）を設定するために使用されるプロパティです。値はパーセンテージ（%）や、px（ピクセル）、cm、pt（ポイント）、emなどの単位、さらには絶対的なキーワードによって指定できます。特に相対的な値を使用することで、ユーザーがブラウザの設定を変更しても文字サイズが追従し、アクセシビリティを最大限に高めることができます。なお、フォントサイズのデフォルト値は16px（または12pt）です。構文CSSのfont-sizeプロパティの基本構文は以下の通りです。セレクタ { font-size: /*値*/ }font-si