Title

font-familyとは

font-family とは次の語句からなるCSSのプロパティです。

font

読み: フォント
意味: 書体

family

読み: ファミリー
意味: 家族

目次に戻る

font-familyプロパティの概要

このプロパティは複数のフォントを列挙しておくことで、ユーザーエージェントが参照するフォントの優先順位を指定することができます。

複数のフォントを列挙する場合には、フォント名をカンマで区切り、フォントを使用する優先順位を指定できます。 また、列挙したフォントのうち、先に記述した(左側に記述した)フォントがエージェントの使用環境下にインストールされていれば、それを適用して、無ければ次のフォントを順次参照していくようになります。

font-familyでフォントを指定する際は、Windows、Mac、iPhone/iPad、それぞれ対応しているフォントが違うので、OSごとに対応したフォントを複数指定しておくのが良いでしょう。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{font-family: '任意のフォント1', '任意のフォント2', '任意のフォント3';}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

フォントには、多くの種類がありますので、ここで全てのフォントをご紹介することはできません。 このページの「まとめ」に幾らかのフォントを実験的に適用するツールを置いていますので参考にしていただければ幸いです。

初期値: ユーザエージェントに依存したフォント

font-familyの初期値はユーザエージェントの設定に依存したフォントとなります。 ここではグローバル値をつかってエージェントの初期値に戻すためのキーワードを使用しています。

div{font-family: initial;}

目次に戻る

複数のフォントを優先順位をつけて指定する

このプロパティは複数のフォントを列挙しておくことで、ユーザーエージェントが参照するフォントの優先順位を指定することができます。 つまり、このサンプルの場合には最初に「Times」のフォントを参照して表示できるかを試みます。 できれば「Times」のフォントを使用しますが、できなければ次に列挙している「Times New Roman」の参照を試みます。 このように順次、列挙した順番に指定フォントが使えるかを試み、使えるフォントのうち早く列挙しているフォント(左側に記述している) を使用します。

div{font-family: Times, Times New Roman, Georgia, serif;}

目次に戻る

グローバル値

font-familyプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値のユーザエージェントに依存したフォントに戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承するのが基本なので、inheritと同じ働きをします。

セレクター{font-family: グローバル値;}

目次に戻る

補足説明

• すべての要素に適用可能
• 親要素の値を継承する

目次に戻る

まとめ

ここでは、検証として各ラジオボタンを選択するとサンプルにCSSが反映されます。 ただし、貴方のPCにインストールされていないフォントは反応しませんので予めご了承ください。 また日本語フォントと英語フォントで適用のされ方が違います。

目次に戻る