font-family/フォント種類

font-familyプロパティを使うとフォントの種類を変更出来ます。

説明

 フォントとは、文字を表示する時に使われる種類でそれぞれ見た目が違います。

 パソコンやスマートフォン等には最初からフォントがインストールされており、デフォルトで使うフォントも決められています。

 このため、フォントを指定しないとデフォルトのフォントで表示されます。

 以下は上から順番にMS Pゴシック、メイリオ、Meiryo UIのフォントを表示したものです。

MS Pゴシック、メイリオ、Meiryu UI表示例

 MS Pゴシックと比較するとメイリオ、Meiryo UIの方が綺麗に見える人が多いと思います。

 WindowsVistaではメイリオ、Windows7ではMeiryo UIがOSで使えますが、IEでもFireFoxでもGoogle ChromeでもブラウザのデフォルトはMS Pゴシックが使われます。

構文

 font-familyプロパティの構文は以下の通りです。

font-family: 種類;

 2種類以上記述する時は,で区切ります。又、フォント名がスペースを含む場合は'や"で囲む必要があります。

 以下はフォント種類の例です。

【フォント種類】
フォント 概要
MS Pゴシック WindowsXP以前の標準
メイリオ WindowsVistaで追加
Meiryo UI Windows7で追加
Osaka かなり以前のMac標準
ヒラギノ角ゴ Pro W3 Mac OS Xで追加
Hiragino Kaku Gothic ProN iPhoneのiOSで利用
serif 明朝体等
sans-serif ゴシック体等
monospace 等幅フォント

 最後3つのserif、sans-serif、monospaceはシステムがサポートするフォントで表示されます。例えば、sans-serifを指定した時にWindowsパソコンから参照するとFireFox等ではゴシック体のMS Pゴシックで表示されます。

 又、これらを指定する場合は'や"で囲まないようにします。

 尚、上記は日本語フォントの一部です。英数字だけ表示出来るArial等、他にも多数のフォントがあります。

利用例

 font-familyの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

body {
font-family: 'Meiryo UI','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
}

<body>bodyでページ全体のフォント変更</body>

 左から順番にサポートしているフォントで表示されます。

 上記を表示すると以下になりますが、見ている環境によって表示されるフォントが異なります。

bodyでページ全体のフォント変更

 上記で一番左にArial等、英数字だけ表示出来るフォントを追加すると、英数字はArial、日本語は他のフォントで表示されるようになります。

 serifだけ指定すると以下のように表示されます。

bodyでserif指定

 文字の端々に跳ねる等の飾りが付いているのがserifの特徴で、sans-serifではゴシック体に見られるように飾りがありません。

 monospaceだけ指定すると以下のように表示されます。

bodyでmonospace指定

補足

 等幅フォントはどの文字でも幅が同じで英字や数字は日本語の半分の幅で表示されます。

 これに対し、幅が統一されていないフォントをプロポーショナルフォントと言います。プロポーショナルフォントは綺麗に見えるように文字毎に幅が違います。

 例えば文字の+や-等を使って文字を囲った場合、以下のようにズレて表示されます。

+----------------------------+
|1234567890123456789012345678|
|ABCDEFGHIJKLMNOPQRSTUVWXYZAB|
|abcdefghijklmnopqrstuvwxyzav|
+----------------------------+

 等幅フォントにすると、以下のようにズレません。

+----------------------------+
|1234567890123456789012345678|
|ABCDEFGHIJKLMNOPQRSTUVWXYZAB|
|abcdefghijklmnopqrstuvwxyzav|
+----------------------------+

 等幅といっても等幅になってないフォントや等幅フォントで表示しないブラウザもあり、その場合はズレて表示されます。

留意点

 フォントの種類によって幅がかなり違います。ホームページを作る際は、どのフォントで表示されてもサイトバーが下に表示される等、大きく見た目が崩れないように配慮が必要です。

関連ページ

・ホームページ作成「フォントの変更

 フォントの種類だけでなく、種類によって見た目が崩れないようにする方法やサイズ、色等フォント全般の変更方法を説明しています。

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)