ywork2020.com

Title

フォントの個別プロパティを一括指定する

目次 (INDEX)

fontとは

font とは次の語句からなるCSSのプロパティです。
font
読み: フォント
意味: 書体

目次に戻る

fontプロパティの概要

このプロパティは文字の書体を設定するために使用します。 fontプロパティは下記のリストに挙げる個別プロパティの設定を一括で指定するために使用するフォントの総合プロパティです。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。 構文のfont-size値とfont-family値に関しては指定することが必須となります。

セレクター{font: 他の個別プロパティ値 font-size値 font-family値;}

目次に戻る

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

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

このサンプルではdiv要素を使用してテキストを内包しています。 このdiv要素にfontプロパティの設定を適用していきたいと思います。

初期値: ユーザエージェントに依存

この一括指定プロパティの初期値は、ユーザエージェントに依存します。 つまり、ユーザーがページを閲覧する場合にはブラウザに初期値に依存するということです。

フォントの個別プロパティを初期化する場合には、グローバルキーワードのinitialを使用することができます。

Hello World!
Welcome to YWORK

div{font: initial;}

目次に戻る

必須値: font-size値 font-family値

構文のセクションでも書きましたが、この一括指定プロパティの設定値には 個別プロパティである font-sizefont-family の設定値を含める必要があります。 つまり、フォントの大きさと使用するフォントの名前は必ず設定値に含めるということです。 また、記述の注意点として、font-familyの設定値はコードの最後で指定します。

Hello World!
Welcome to YWORK

div{font: 1.2em 'Yu Mincho',Sans-serif;}

目次に戻る

任意値: 個別プロパティの値

個別プロパティである font-sizefont-family の設定値を含めた上で、 他の個別プロパティの設定値を指定することができます。 この場合は他の個別プロパティの設定値を先に記述して、次にfont-sizeの値を記述して、font-familyの設定値はコードの最後で指定します。

注意点としては、 font-stretch プロパティの値はキーワードのみの指定、 font-variant プロパティの値はnormalキーワードとsmall-capsキーワードのみの指定しかできません。

ここでは、サンプルとしてfont-styleとfont-weightの設定も同時に行っています。

Hello World!
Welcome to YWORK

div{font: italic bold 1.2em 'Yu Mincho', Sans-serif;}
上記の一括指定を個別プロパティを使って設定すると下記のようになります。
div{
	font-style: italic;
	font-weight: bold;
	font-size: 1.2em;
	font-family: 'Yu Mincho', Sans-serif;
}

目次に戻る

応用: line-heightプロパティの値

fontプロパティでは行間を指定するための line-height プロパティの設定を同時に行うことができます。

これは個別プロパティの font-size の設定値と組み合わせて設定を行います。

構文はfont-sizeの値の後に「/」スラッシュを記述してline-heightの値を設定します。

div{
	font: font-size値/line-height値 font-family値;
}
Hello World!
Welcome to YWORK

div{font: 1em/3em 'Yu Mincho', Sans-serif;}

目次に戻る

グローバル値

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

  • inheritは親要素の値の継承を促します。
  • initialは値を初期値に戻します。
  • unsetは継承の初期値に戻します。
    ※このプロパティは親要素の値を継承するのが基本なので、inheritと同じ働きをします。
セレクター{font: グローバル値;}

目次に戻る

備考:システムフォント値

fontプロパティではシステムフォントのキーワードを指定することでシステムフォントを使用することができます。 以下に基本的なシステムフォントのキーワードをリストします。

  • caption
  • icon
  • menu
  • message-box
  • small-caption
  • status-bar

システムフォントのサンプルはこのページの「まとめ」で確認できます。

ここではシステムフォントについて、一応の説明として掲載しましたが、基本的にシステムフォントを使用することはお勧めしません。 システムに依存するフォントというとOSの基礎フォントにあわせている感じがして、良いイメージを思うかもしれませんが、これはデザインを崩す原因になりかねません。 閲覧ユーザーにも迷惑になる可能性もあります。 また、サンプルで確認したとしても分かりづらい物もあるかもしれません。

セレクター{font: システムフォントキーワード値;}

目次に戻る

補足説明

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

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

font: initial;

font: 1.2em 'Yu Mincho',Sans-serif;

font: italic bold 1.2em 'Yu Mincho', Sans-serif;

font: small-caps 110% Times, 'Times New Roman';

font: 110%/5em Times, 'Times New Roman';;

font: caption;

font: icon;

font: menu;

font: message-box;

font: small-caption;

font: status-bar;

サンプル: ブロック要素
Hello World!
Welcome to YWORK

サンプル: インライン要素 [ Hello World! Welcome to YWORK ]

目次に戻る