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

CSSのfont-familyプロパティとは？フォント指定の基本と使い方を徹底解説

Webページ上のテキストのスタイリングは、Webデザインにおいて非常に重要な要素です。たとえば、見出しに特定のフォントを使いたい、ページ全体のテキストをセリフ体（serif）で統一したい、といったケースはよくあります。

そんなときに役立つのが、CSSのfont-familyプロパティです。font-familyプロパティを使うことで、Webページのテキストに適用するフォントファミリーを1つ、または複数指定できます。

この記事では、具体的なコード例とともに、CSSのfont-familyプロパティの基本と、実際の使い方について詳しく解説します。

CSSフォントファミリー（font-family）の基本

CSSでフォントをスタイリングする際には、色の設定やサイズの指定など、さまざまな側面があります。その中でも最も重要なのが、フォントファミリーの指定です。フォントファミリーとは、Webページ上のテキストに使用される書体のことです。

テキストのフォントファミリーを設定するには、font-familyプロパティを使用します。構文は以下の通りです。

font-family: フォント名1, フォント名2, …;

font-familyプロパティには、単一のフォント、あるいはフォントのリストを指定できます。複数のフォントを指定する場合は、各フォントをカンマ（,）で区切ります。

フォントが適用される順序は、記述した順番どおりです。ブラウザは、リストの先頭から順に、インストール済みまたはダウンロード可能なフォントを探し、最初に見つかったフォントを採用します。先頭のフォントが利用できない場合は2番目のフォントが使われ、以降も同様に処理されます。

ここで重要なポイントとして、font-familyプロパティはテキストブロック内の文字ごとにフォントを選択します。つまり、特定の文字があるフォントに含まれていない場合、その文字についてはリスト内の次のフォントが試され、適切なフォントが見つかるまで処理が繰り返されます。

また、font-familyプロパティを使う際には、少なくとも1つの総称フォントファミリー名（serif、sans-serif、monospaceなど）を含めておくのがベストプラクティスです。これにより、リスト内の他のフォントがすべて利用できない環境でも、ブラウザが代替フォントを選択し、テキストを確実に表示できるようになります。

font-familyプロパティの使い方は大きく分けて2つあります。1つ目は、Webページにカスタムフォントを指定する方法。2つ目は、総称フォントファミリーをテキストに適用する方法です。font-familyプロパティで使用できる主な総称フォントファミリーは以下の通りです。

  • serif：文字にうろこ（セリフ）のある書体（例：Lucida Bright、Palladio）
  • sans-serif：セリフのない書体（例：Open Sans、Trebuchet MS）
  • monospace：すべての文字が同じ幅を持つ等幅書体（例：Menlo、Consolas）
  • cursive：筆記体のように文字が連なる書体（例：Lucida Calligraphy）
  • fantasy：文字を目立たせるための装飾的な書体（例：Papyrus）

その他の総称フォントファミリーについては、MozillaのCSS font-family公式ドキュメントで詳しく確認できます。

それでは、font-familyプロパティの基本がわかったところで、実際のコード例を見ていきましょう。

CSS font-familyの使用例

ここでは、地元の切手収集クラブ「シアトル・スタンプ・クラブ」から依頼を受け、Webサイトの一部のフォントをカスタマイズするケースを想定して説明します。

まず、「Contact（お問い合わせ）」ページのすべての<h1>見出しを「Open Sans」フォントに変更するよう依頼されたとします。たとえば、同ページの「Contact Us（お問い合わせ）」という見出しがOpen Sansで表示されるようにします。もしOpen Sansが利用できない場合は、総称ファミリーの「sans-serif」が使われるようにします。このタスクは、次のコードで実現できます。

<html>
<h1>Contact Us</h1>
<style>
h1 {
	font-family: "Open Sans", sans-serif;
}
</style>

このHTMLコードでは、<h1>タグで「Contact Us」というテキストを含む見出しを定義しています。そしてCSSコードでは、font-familyプロパティを使って、Webページ上の<h1>要素のフォントを指定しています。

font-familyプロパティに指定した値により、すべての<h1>要素のフォントが「Open Sans」に設定されます。このフォントが利用できない場合には、総称ファミリーの「sans-serif」が代わりに使用されます。このように、複数のフォントをカンマで区切って指定することで、フォールバック（代替表示）を実現できます。

次に、同じく「Contact」ページのすべての<p>要素をTimesフォントで表示したいとしましょう。Timesが利用できない場合は、デフォルトのセリフ体（serif）が使われるようにします。この場合は、次のようなコードを書きます。

<html>
<p>Are you interested in learning more about the Seattle Stamp Club? Contact us today!</p>
<style>
p {
	font-family: "Times", serif;
}
</style>

この例では、<p>タグで段落テキストを宣言しています。続いて、CSSスタイルシートで、すべての<p>タグのfont-familyとして「Times」と「serif」を指定しました。デフォルトでは、ブラウザはすべての<p>タグを「Times」フォントでレンダリングしようとします。このフォントが利用できない場合は、「serif」フォントが使用されます。

まとめ

CSSのfont-familyプロパティを使うと、Webページ上のテキストの書体を自由に指定できます。たとえば、ページ全体のテキストに「Arial」フォントや総称ファミリーの「cursive」を適用する、といったことも可能です。

この記事では、コード例を交えながら、CSSのfont-familyプロパティの基本と、Webページのテキストへの適用方法を解説しました。これであなたも、プロのWebデザイナーのようにfont-familyプロパティを使いこなせるはずです！

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

    CSSのfont-familyプロパティは、選択した要素に特定のフォントを適用するために使用します。ブラウザやOSによって利用できるフォントが異なるため、複数のフォントをカンマ区切りで指定し、代替フォント（フォールバック）を設定してWebセーフフォントを活用することで、クロスブラウザ間の互換性を確保するのがおすすめです。 font-familyプロパティの構文 CSSのfont-familyプロパティは、以下のような構文で記述します。 セレクタ { font-family: /*値*/; } フォント名にスペースが含まれる場合は、Segoe Printのようにダブルクォーテーションで

  2. CSSフォントプロパティ徹底解説！font-familyやfont-sizeの使い方と実例

    CSSのフォントプロパティを使うことで、Webページ上のテキストの見た目を自由にカスタマイズできます。本記事では、テキストのスタイリングに役立つ主要なフォント関連プロパティを、実際のコード例とともにわかりやすく解説します。 CSSの主要なフォントプロパティ一覧 font-family 要素に適用するフォント（書体）を指定するためのプロパティです。複数のフォント名をカンマ区切りで列挙でき、先頭から順に利用可能なものが適用されます。 font-kerning 文字間隔を均一に整え、可読性を高めるために使用するプロパティです。ただし、この機能はフォント側がカーニング情報を持っている場合にのみ有効とな