font-familyプロパティを使うとフォントの種類を変更出来ます。
フォントとは、文字を表示する時に使われる種類でそれぞれ見た目が違います。
パソコンやスマートフォン等には最初からフォントがインストールされており、デフォルトで使うフォントも決められています。
このため、フォントを指定しないとデフォルトのフォントで表示されます。
以下は上から順番にＭＳ Ｐゴシック、メイリオ、Meiryo UIのフォントを表示したものです。
ＭＳ Ｐゴシックと比較するとメイリオ、Meiryo UIの方が綺麗に見える人が多いと思います。
WindowsVistaではメイリオ、Windows7ではMeiryo UIがOSで使えますが、IEでもFireFoxでもGoogle ChromeでもブラウザのデフォルトはＭＳ Ｐゴシックが使われます。
font-familyプロパティの構文は以下の通りです。
font-family: 種類;
2種類以上記述する時は,で区切ります。又、フォント名がスペースを含む場合は'や"で囲む必要があります。
以下はフォント種類の例です。
| フォント | 概要 |
|---|---|
| ＭＳ Ｐゴシック | 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等ではゴシック体のＭＳ Ｐゴシックで表示されます。
又、これらを指定する場合は'や"で囲まないようにします。
尚、上記は日本語フォントの一部です。英数字だけ表示出来るArial等、他にも多数のフォントがあります。
font-familyの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。
body {
font-family: 'Meiryo UI','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
}
<body>bodyでページ全体のフォント変更</body>
左から順番にサポートしているフォントで表示されます。
上記を表示すると以下になりますが、見ている環境によって表示されるフォントが異なります。
上記で一番左にArial等、英数字だけ表示出来るフォントを追加すると、英数字はArial、日本語は他のフォントで表示されるようになります。
serifだけ指定すると以下のように表示されます。
文字の端々に跳ねる等の飾りが付いているのがserifの特徴で、sans-serifではゴシック体に見られるように飾りがありません。
monospaceだけ指定すると以下のように表示されます。
等幅フォントはどの文字でも幅が同じで英字や数字は日本語の半分の幅で表示されます。
これに対し、幅が統一されていないフォントをプロポーショナルフォントと言います。プロポーショナルフォントは綺麗に見えるように文字毎に幅が違います。
例えば文字の+や-等を使って文字を囲った場合、以下のようにズレて表示されます。
等幅フォントにすると、以下のようにズレません。
等幅といっても等幅になってないフォントや等幅フォントで表示しないブラウザもあり、その場合はズレて表示されます。
フォントの種類によって幅がかなり違います。ホームページを作る際は、どのフォントで表示されてもサイトバーが下に表示される等、大きく見た目が崩れないように配慮が必要です。
・ホームページ作成「フォントの変更」
フォントの種類だけでなく、種類によって見た目が崩れないようにする方法やサイズ、色等フォント全般の変更方法を説明しています。
・ホームページ作成「スタイルシートの定義方法」
外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。
検索付「CSSプロパティ早見表」に戻る
スマホ向け「CSSプロパティ一覧」に戻る
★上ページに含まれるプロパティ
