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

Font Sketch Hand drawing letters

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

目次

 1.fontプロパティで指定できるプロパティ
 2.font-family
 3.font-size
 4.font-variant
 5.font-style

1.fontプロパティで指定できるプロパティ

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

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プロパティで各プロパティの値をまとめて指定する場合には、以下の順序で指定します。
1.font-style、font-variant、font-weight(この3つのプロパティ内は順不問)
2.font-size
3.line-height
4.font-family

●fontプロパティを使用する場合は、指定可能な6つのプロパティのうち、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 等幅フォント
フォント名 フォント名にスペースが含まれている場合は、ダブルクォーテーション( ” )またはシングルクォーテーション( ‘ )で囲み、”MS ゴシック”のように指定

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

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

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

font-family:serif;
(明朝系のフォント)

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

font-family:fantasy;
(装飾的なフォント)

font-family:monospace;
(等幅フォント)

font-family:”MS P明朝”;
(MS P明朝)

 
ソースは次の通りです。

(CSS)
p#sample {
	height: 100px;
	padding: 20px;
	background-color: #FF9696;
	font-family:sans-serif; /*またはserif、cursive、fantasy、monospace、"MS P明朝"*/
	}

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

▲目次へ戻る

3.font-size

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

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

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

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

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

font-size:xx-small;
(7つのキーワードの中で最小のサイズ)

font-size:x-small;
(xx-smallの1.2倍のサイズ)

font-size:small;
(x-smallの1.2倍のサイズ)

font-size:medium;
(smallの1.2倍のサイズ(デフォルトのサイズ))

font-size:large;
(mediumの1.2倍のサイズ)

font-size:x-large;
(largeの1.2倍のサイズ)

font-size:xx-large;
(x-largeの1.2倍のサイズ)

font-size:80%;
(デフォルトの80%のサイズ)

font-size:100%;
(デフォルトのサイズ)

font-size:150%;
(デフォルトの150%のサイズ)

font-size:10px;
(10px)

font-size:10em;
(10em)

font-size:10ex;
(10ex)

 
ソースは次の通りです。

(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;
    (7つのキーワードの中で最小のサイズ)
  </p>
  <p>
    font-size:x-small;
    (xx-smallの1.2倍のサイズ)
  </p>
  <p>
    font-size:small;
    (x-smallの1.2倍のサイズ)
  </p>
    font-size:medium;
    (smallの1.2倍のサイズ(デフォルトのサイズ))
  </p>
  <p>
    font-size:large;
    (mediumの1.2倍のサイズ)
  </p>
    font-size:x-large;
    (largeの1.2倍のサイズ)
  </p>
  <p>
    font-size:xx-large;
    (x-largeの1.2倍のサイズ)
  </p>
  <p>
    font-size:80%;
    (デフォルトの80%のサイズ)
  </p>
  <p>
    font-size:100%;
    (デフォルトのサイズ)
  </p>
  <p>
    font-size:150%;
    (デフォルトの150%のサイズ)
  </p>
  <p>
    font-size:10px;
    (10px)
  </p>
  <p>
    font-size:10em;
    (10em)
  </p>
  <p>
    font-size:10ex;
    (10ex)
  </p>
</div>

▲目次へ戻る

4.font-variant

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

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

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

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

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

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

ABCDEFabcdef

ABCDEFabcdef

 
ソースは次の通りです。

(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の3つです。

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

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

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

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

font-style:normal;
(標準フォントで直立表示)

font-style:oblique;
(斜体用フォントで斜体表示)

font-style:italic;
(イタリック斜体用フォントで斜体表示)

 
ソースは次の通りです。

(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>

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です