フォントの種類を指定する
書き方
font-family:フォント名, フォント名, フォント名, …
フォント名：
| フォント名 |
| フォントファミリー名 |
| キーワード |
解説
font-familyプロパティで、フォント名を指定します。
フォント名は一つでも指定できますが、複数指定する場合は「,」で区切って指定します。
この場合、左側に書かれているフォント名が優先され、ユーザーのブラウザで表示が可能なものが採用されます。
ただし、ページを見る人の環境によっては指定されたフォントが一つもインストールされていない場合もあるので、必ずしも制作者側が指定したフォントで表示されるとは限りません。
指定されたフォントが存在しない場合は、ブラウザがそれに似たフォントを割り当てます。
また、WindowsやMacなどのOSによってもインストールされているフォントが違います。
Windowsには「Osaka」や「Osaka-等幅」などはインストールされていませんし、Macには「MS UI Gothic」や「ＭＳ ゴシック」など"MS"の付くフォントなどはインストールされていません。
1. フォント名で指定する場合
フォント名で指定します。
フォント名は全角・半角、スペースなど正確に記述する必要があります。
- MS UI Gothic : 全て半角で記述します。大文字や小文字も正確に記述し、半角のスペースを入れます。
- ＭＳ ゴシック : 「ＭＳ」は全角の大文字、半角のスペースを入れ、「ゴシック」は全角のカタカナです。
また、フォント名の中にスペースがある場合は、フォント名の前後を「"」または「'」で囲んで指定します。
2. フォントファミリーで指定する場合
フォントファミリーは、一つのフォントに対して太字や斜体など、あらかじめ別々のデザインを用意しておくものです。
このことにより、より美しい表示や印刷が可能になります。
例えば、「Times New Roman」というフォントファミリーを例にしてみます。
このフォントファミリーに属するフォントは以下の4種類あります。
- Times New Roman
- Times New Roman Bold
- Times New Roman Italic
- Times New Roman Bold Italic
文字に対して、「Times New Roman」を指定したとき、
太字にすると「Times New Roman Bold」が適用され、
斜体にすると「Times New Roman Italic」が適用され、
太字＆斜体にすると「Times New Roman Bold Italic」が適用されることになります。
太字や斜体の指定がない場合は、「Times New Roman」が適用されます。
3. キーワードで指定する場合
キーワードは、フォントの種類をあらわします。
| serif | 明朝系 | Times New Roman，Garamond，MS Georgia， ＭＳ Ｐ明朝 |
| sans-serif | ゴシック系 | Helvetica，Arial，Verdana， ＭＳ Ｐゴシック，Osaka |
| cursive | 草書体・筆記体系 | Caflisch Script，ex ponto，Adobe Poetica |
| fantasy | 装飾されたフォント | Critter，Cottonwood，studz |
| monospace | 等幅フォント | Courier，MS Courier New，ＭＳ ゴシック， Osaka-等幅 |
サンプル
フォント名＝Comic Sans MS
フォントファミリー名＝Times New Roman
キーワード＝monospace
<!--
.case1 { font-family:"Comic Sans MS",sans-serif }
.case2 { font-family:"Times New Roman",serif }
.case3 { font-family:monospace }
-->
</STYLE>
<P class="case1">フォント名＝Comic Sans MS</P>
<P class="case2">フォントファミリー名＝Times New Roman</P>
<P class="case3">キーワード＝monospace</P>