CSS【 font 】 ～ フォントの指定

fontプロパティは、フォント関連のプロパティをまとめて指定できるショートハンドプロパティです。
font-sizeプロパティやfont-familyプロパティなど、フォントに関する６つのプロパティの値を一括で指定することができます。
今回は、fontプロパティについてまとめたいと思います。

目次

　１．fontプロパティで指定できるプロパティ
　２．font-family
　３．font-size
　４．font-variant
　５．font-style

１．fontプロパティで指定できるプロパティ

fontプロパティは、ショートハンドプロパティで、フォントに関する各プロパティをまとめて指定できます。
fontプロパティで指定できるのは、次の６つのプロパティの値です。

font-style	フォントのスタイルを指定 値：normal（デフォルト値）、italic、oblique
font-variant	フォントをスモールキャップスにする 値：normal、small-caps
font-weight	フォントの太さを指定 値：normal、bold、lighter、bolder、数値（100、200、・・・、900）
font-size	フォントのサイズを指定 値：xx-small、x-small、small、medium（標準）、large、x-large、xx-large、%、単位付きの数値
line-height	行の高さを指定 値：normal（デフォルト値）、%、単位付きの数値、数値のみ
font-family	フォントの種類を指定 値：sans-serif、serif、cursive、fantasy、monospace、フォント名

●fontプロパティで各プロパティの値をまとめて指定する場合には、以下の順序で指定します。
１．font-style、font-variant、font-weight（この３つのプロパティ内は順不問）
２．font-size
３．line-height
４．font-family

●fontプロパティを使用する場合は、指定可能な６つのプロパティのうち、font-sizeプロパティとfont-familyプロパティは省略することができません。

●fontプロパティでline-heightを指定する場合は、次のようにline-heightの値の前にスラッシュ（ / ）を記載します。
font: bold large/150% serif;

●fontプロパティを使用すると、フォント関連のスタイルが一旦リセットされた上で、fontプロパティで指定した値が適用されます。
省略した値は、親要素の値を継承するのではなく、デフォルト値となります。

▲目次へ戻る

２．font-family

font-familyプロパティは、フォントの種類を指定する際に使用するプロパティです。

フォントの種類は、カンマ（ , ）で区切って複数指定することができます。
フォントの種類を複数指定しておくと、ユーザ環境で表示可能なものが指定した順番で選択されるため、より多くのユーザに対して、作成者のイメージに近いフォントで表示させることができます。

指定したフォントがユーザの環境で表示できない場合は、ブラウザで設定されたデフォルトのフォントで表示されます。

font-familyプロパティの値は、次の通りです。

sans-serif	ゴシック系のフォント
serif	明朝系のフォント
cursive	筆記体（草書体）のフォント
fantasy	装飾的なフォント
monospace	等幅フォント
フォント名	フォント名にスペースが含まれている場合は、ダブルクォーテーション（ ” ）またはシングルクォーテーション（ ‘ ）で囲み、”ＭＳ ゴシック”のように指定

font-familyプロパティの値は、継承されます。
また、font-familyプロパティは、全ての要素で使用できます。

font-familyプロパティでフォントの種類を指定すると、次のように表示されます。

font-family:sans-serif;
（ゴシック系のフォント）

font-family:serif;
（明朝系のフォント）

font-family:cursive;
（筆記体（草書体）のフォント）

font-family:fantasy;
（装飾的なフォント）

font-family:monospace;
（等幅フォント）

font-family:”ＭＳ Ｐ明朝”;
（ＭＳ Ｐ明朝）

　
ソースは次の通りです。

（CSS）
p#sample {
	height: 100px;
	padding: 20px;
	background-color: #FF9696;
	font-family:sans-serif; /*またはserif、cursive、fantasy、monospace、"ＭＳ Ｐ明朝"*/
	}

（HTML）
<p id="sample">
  font-family:〇〇〇;
  （〇〇のフォント）
</p>

▲目次へ戻る

３．font-size

font-sizeプロパティは、フォントのサイズを指定する際に使用するプロパティです。

font-sizeプロパティの値は、次の通りです。

xx-small	７つのキーワードの中で最小のサイズ
x-small	xx-smallの１．２倍のサイズ
small	x-smallの１．２倍のサイズ
medium	smallの１．２倍のサイズ（デフォルト値）
large	mediumの１．２倍のサイズ
x-large	largeの１．２倍のサイズ
xx-large	x-largeの１．２倍のサイズ
単位付きの数値	数値にpx、em、ex等の単位を付けて指定（マイナスの指定は不可） px：１ピクセルを１とする単位（実際に表示されるサイズはモニターの解像度に依存） em：フォントの高さを１とする単位 ex：小文字の「x」の高さを１とする単位
%	デフォルトのサイズに対する%で指定

font-sizeプロパティの値は、継承されます。
また、font-sizeプロパティは、全ての要素で使用できます。

font-sizeプロパティでフォントのサイズを指定すると、次のように表示されます。

　
ソースは次の通りです。

（CSS）
div#sample {
	height: 100px;
	padding: 5px;
	background-color: #31A9EE;
	}
div#sample p:nth-child(1) {font-size:xx-small;}
div#sample p:nth-child(2) {font-size:x-small;}
div#sample p:nth-child(3) {font-size:small;}
div#sample p:nth-child(4) {font-size:medium;}
div#sample p:nth-child(5) {font-size:large;}
div#sample p:nth-child(6) {font-size:x-large;}
div#sample p:nth-child(7) {font-size:xx-large;}
div#sample p:nth-child(8) {font-size:80%;}
div#sample p:nth-child(9) {font-size:100%;}
div#sample p:nth-child(10) {font-size:150%;}
div#sample p:nth-child(11) {font-size:10px;}
div#sample p:nth-child(12) {font-size:10em;}
div#sample p:nth-child(13) {font-size:10ex;}

（HTML）
<div id="sample">
  <p>
    font-size:xx-small;
    （７つのキーワードの中で最小のサイズ）
  </p>
  <p>
    font-size:x-small;
    （xx-smallの１．２倍のサイズ）
  </p>
  <p>
    font-size:small;
    （x-smallの１．２倍のサイズ）
  </p>
    font-size:medium;
    （smallの１．２倍のサイズ（デフォルトのサイズ））
  </p>
  <p>
    font-size:large;
    （mediumの１．２倍のサイズ）
  </p>
    font-size:x-large;
    （largeの１．２倍のサイズ）
  </p>
  <p>
    font-size:xx-large;
    （x-largeの１．２倍のサイズ）
  </p>
  <p>
    font-size:80%;
    （デフォルトの８０％のサイズ）
  </p>
  <p>
    font-size:100%;
    （デフォルトのサイズ）
  </p>
  <p>
    font-size:150%;
    （デフォルトの１５０％のサイズ）
  </p>
  <p>
    font-size:10px;
    （１０ｐｘ）
  </p>
  <p>
    font-size:10em;
    （１０ｅｍ）
  </p>
  <p>
    font-size:10ex;
    （１０ｅｘ）
  </p>
</div>

▲目次へ戻る

４．font-variant

font-variantプロパティは、要素内の小文字をスモールキャップスにする際に使用するプロパティです。

スモールキャップスとは、小文字と同じ高さで作られた大文字のことです。
指定したフォントにスモールキャップスがない場合は、大文字を縮小したものを表示します。

font-variantプロパティの値は、normalとsmall-capsの２つです。

normal	通常のフォントのまま表示
small-caps	大文字は大文字のまま、小文字をスモールキャップスで表示

font-variantプロパティの値は、継承されません。
また、font-variantプロパティは、全ての要素で使用できます。

大文字と小文字が混在する「ABCDEFabcdef」という文字列について、font-variantプロパティでnormalとsmall-capsをそれぞれ指定すると、次のように表示されます（上がnormal、下がsmall-capsです）。

　
ソースは次の通りです。

（CSS）
div#sample {
	padding: 20px;
	font-size:200%;
	background-color: #B20000;
	}
div#sample p:nth-child(1) {font-variant:normal;}
div#sample p:nth-child(2) {font-variant:small-caps;}

（HTML）
<div id="sample">
  <p>
    ABCDEFabcdef
  </p>
  <p>
    ABCDEFabcdef
  </p>
</div>

▲目次へ戻る

５．font-style

font-styleプロパティは、フォントの表示スタイルを指定する際に使用するプロパティです。

font-styleプロパティの値は、normal、italic、obliqueの３つです。

normal	デフォルト値 標準フォントで直立表示
italic	斜体用フォントで斜体表示
oblique	イタリック斜体（より草書的な斜体）用フォントで斜体表示

font-styleプロパティの値は、継承されます。
また、font-styleプロパティは、全ての要素で使用できます。

日本語の場合、oblique（斜体用フォント）やitalic（イタリック斜体用フォント）が用意されていることはほとんどなく、 標準フォントを斜めに傾けて表示するため、obliqueとitalicとでブラウザ上の表示に違いがない場合も多いです。

font-styleプロパティでフォントの表示スタイルを指定すると、次のように表示されます。

　
ソースは次の通りです。

（CSS）
div#sample {
	padding: 20px;
	background-color: #006DD9;
	}
div#sample p:nth-child(1) {font-style:normal;}
div#sample p:nth-child(2) {font-style:oblique;}
div#sample p:nth-child(3) {font-style:italic;}

（HTML）
<div id="sample">
  <p>
    font-style:normal;
    （標準フォントで直立表示）
  </p>
  <p>
    font-style:oblique;
    （斜体用フォントで斜体表示）
  </p>
  <p>
    font-style:italic;
    （イタリック斜体用フォントで斜体表示）
  </p>
</div>

▲目次へ戻る