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

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. 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プロパティで指定した値が適用されます。
省略した値は、親要素の値を継承するのではなく、デフォルト値となります。

▲目次へ戻る

2. 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>

▲目次へ戻る

3. 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>

▲目次へ戻る

4. 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>

▲目次へ戻る

5. 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>

▲目次へ戻る