フォントの種類を指定するスタイルは「font-family」です。WindowsやMac、AndroidスマートフォンやiPhoneで表示する際に、問題なく文字が表示できるように設定します。その場合に 標準でインストールされているフォントを指定することが一般的です。ゴシック体や明朝体など書体が変わるだけで文章の雰囲気も変わります。ここではfont-familyについて具体的な記述の書き方を説明します。
こんにちは！あーるくんです。ヾ ^_^♪
Adobe提携校でWEBクリエイター講師を２年ほどしていました。しっかりと学べるように記事を書いていくので閲覧よろしくお願い致します。
もくじ文字の書体を指定するCSS｜font-family
- font-family
- font-familyの記述例。
- WindowsとMacintoshで標準にインストールされているフォント。
- 日本語文字と半角英数文字について。
- ブラウザの読み込む順番について。
- まとめ
フォントの種類ってどれくらいあるんだろう？
サイトの雰囲気に合わせて、ゴシック体や明朝体を選択することも必要ね！
font-family
| 値 | 内容 | |
|---|---|---|
| font-family | 日本語名のフォント | “ＭＳ ゴシック”や”Osaka”など、決められたフォント名を表示します。 |
| serif | 明朝系のフォントで表示します。 | |
| sans-serif | ゴシック系のフォントで表示します。 | |
| cursive | 筆記体、草書体系のフォントで表示します。 | |
| fantasy | 装飾系のフォントで表示します。 | |
| monospace | 等幅のフォントで表示します。 |
font-familyの記述例。
| p{ font-family:"ＭＳ ゴシック","Osaka"; } |
pタグの文章に「font-family」を適用した例です。「ＭＳ ゴシック」と「Osaka」と書いた記述が確認できると思います。この２つはどちらもゴシック体の指定です。
ＭＳ ゴシックは、Windowsに標準でインストールされているゴシック体。Osakaは、Macに標準でインストールされているゴシック体です。
このように指定することで、WindowsとMacどちらで閲覧しても、pタグで書いた文章はゴシック体で表示できます。
スマートフォンの指定について
※ iPhoneはApple社なのでMacと同じフォントの指定です。Android含め、WindowsとMacの２つを対応をすることでスマートフォンやタブレットも対応できているという認識で大丈夫です。
WindowsとMacintoshで標準にインストールされているフォント。
| OS | フォント | 内容 |
|---|---|---|
| Windows | メイリオ | Windowsに標準でインストールされているゴシック体のフォントです。 |
| ＭＳ ゴシック | Windowsに標準でインストールされているゴシック体の等幅フォントです。MSは全角、ゴシックとの間に半角スペース挿入。 | |
| ＭＳ Ｐゴシック | Windowsに標準でインストールされているゴシック体のプロポーショナルフォントです。MSとPは全角、MSとPとの間に半角スペース挿入。 | |
| ＭＳ 明朝 | Windowsに標準でインストールされている明朝体の等幅フォントです。MSは全角、明朝との間に半角スペース挿入。 | |
| ＭＳ Ｐ明朝 | Windowsに標準でインストールされている明朝体のプロポーショナルフォントです。MSとPは全角、MSとPとの間に半角スペース挿入。 | |
| Arial | Windowsに標準でインストールされているゴシック体の欧文フォントです。 |
| OS | フォント | 内容 |
|---|---|---|
| Mac | ヒラギノ角ゴ Pro W3 | Macintosh OS X以降に標準でインストールされているゴシック体のフォントです。 |
| ヒラギノ明朝 Pro W3 | Macintosh OS X以降に標準でインストールされている明朝体のフォントです。 | |
| Osaka | Macintosh OS X以前に標準でインストールされているゴシック体のフォントです。 | |
| 細明朝体 | Macintosh OS X以前に標準でインストールされている明朝体のフォントです。 | |
| Helvetica | Macintoshに標準でインストールされているゴシック体の欧文フォントです。 |
上記はフォントの種類を紹介しております。深い意味は考えなくてもOKです。WindowsとMacそれぞれに、標準でインストールされているゴシック体と明朝体の種類があると認識頂ければ大丈夫です。
日本語文字と半角英数文字について。
文章には日本語と半角英数文字が必然的に入ってくると思います。先程font-familyで適用した「ＭＳ ゴシック」「Osaka」については、日本語文字の指定となります。半角英数文字に対しても同じくスタイルを適用します。
適用させるフォントが日本語文字の場合
適用させるフォントが日本語文字の場合に、フォント名を”（ダブルクォート）で挟み、各フォントを,（カンマ）で区切ります。
| p{ font-family:"ＭＳ ゴシック","Osaka"; } |
適用させるフォントが半角英数文字の場合
半角英数名のフォントの場合は”（ダブルクォート）で挟む必要はありません。各フォントを,（カンマ）で区切ります。
| p{ font-family:Meiryo,Osaka,sans-serif; } |
ブラウザの読み込む順番について。
ブラウザはスタイルに記述したフォントを左側から順番に読み込みます。実際にそのパソコンにインストールされているフォントがあれば、適用させる仕組みになっています。なので、一番優先順位の高いフォントを一番左側に記述しておきます。
記述例
| p{ font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } |
※ 一般的に上記のような書き方でフォントを指定します。このままコピペで使うとOKです。
結論、font-familyはコピペで大丈夫です！
まとめ
フォントの種類を確認したい場合、上記で紹介したフォントを一つずつpタグやhタグに適用すると分かります。
文章に使われるフォントはゴシック体が一般的です。サイトによって明朝体を指定することもあります。hタグやaタグ、liタグなど、個別にフォントを指定することも可能です。
注意点は、何もフォントを指定しなかった場合、ブラウザが勝手に判断します。文字を書くタグには必ずfont-familyを適用するようにしましょう。