はじめに
HTML＆CSS入門講座の第九弾として、【CSS】font-family の使い方、font-familyの一覧、おすすめの設定例は？ついて紹介します。
この記事を読むと次の疑問について知ることができます。
・フォントファミリー名
・総称フォント名
●主要なOSで利用されているフォントには何があるの？
●font-familyの書き方はどうするの？
・font-familyの書き方の決まり事
・おすすめのfont-familyの書き方の例
font-familyとは？
CSSの中でfont-familyプロパティーを指定することにより、パソコンやスマホで使われるフォントの種類を指定することができます。
ユーザー各自の端末がどのようなフォントを使用しているかは、端末に依存し、そのような場合は、font-familyプロパティーを利用して、どの端末にも適合するフォントを順番に指定します。
font-familyプロパティーには、「フォントファミリー名」、「総称フォント名」を指定します。
フォントファミリー名
具体的なフォント名で、例えば、「Arial」、「「メイリオ」などの欧文フォントや日本語フォントなどの名称です。
これらフォント名をfont-familyプロパティーに指定する際には、OSなどにより指定する固有名称が異なりますので注意する必要があります。
総称フォント名
フォントを大きく分類したものを総称フォント名と呼びます。
例えば、ゴチック体、明朝体、等幅フォントなどです。
代表的な総称フォントを以下に載せます。（【2021年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例より載せさせていただきました。）
| 総称フォント名 | フォント分類 | 適用フォント例 |
| sans-serif | ゴシック体フォント | メイリオ、ヒラギノ角ゴシック、Arial |
| serif | 明朝体フォント | MS P明朝、ヒラギノ明朝、Times |
| system-ui | OSのUIと同じフォント | Yu Gothic UI、Meiryo、ヒラギノ角ゴシック、San Francisco |
| monospace | 等幅系フォント | MSゴシック、MS明朝、Osaka-Mono |
| cursive | 筆記体系フォント | Comic Sans MS、Scriptなど |
| fantasy | 装飾系フォント | alba、Chickなど |
主要なOSで利用されているフォント
Android端末では、作成するメーカーが多いために、フォントも種類が多く、一概に決めることができないために、font-familyを指定する必要は特にないと思っていますが、もし指定するならば、font-familyに「Roboto」、「Droid Sans」を指定しておくと良いでしょう。
ここでは、Windows 、Mac、iphone、iPadでどのようなフォントが主に利用されているかを表にまとめました。
| Windows | Mac | iphone、iPad | |||
| ゴチック体フォント | |||||
| フォント名 | font-familyでの表記 | フォント名 | font-familyでの表記 | フォント名 | font-familyでの表記 |
| メイリオ | Meiryo メイリオ | メイリオ | Meiryo メイリオ | ||
| Meiryo UI | Meiryo UI | Meiryo UI | Meiryo UI | ||
| ヒラギノ角ゴシック（Hiragino Sans） | Hiragino Sans ヒラギノ角ゴシック | ヒラギノ角ゴシック（Hiragino Sans） | Hiragino Sans ヒラギノ角ゴシック | ||
| ヒラギノ角ゴシック ProN（Pro） | Hiragino Kaku Gothic ProN ヒラギノ角ゴ ProN Hiragino Kaku Gothic Pro ヒラギノ角ゴ Pro | ヒラギノ角ゴシック ProN（Pro） | Hiragino Kaku Gothic ProN ヒラギノ角ゴ ProN Hiragino Kaku Gothic Pro ヒラギノ角ゴ Pro | ||
| 游ゴシック | Yu Gothic 游ゴシック | 游ゴシック | YuGothic、游ゴシック体 | ||
| YU Gothic UI | Yu Gothic UI | ||||
| ヒラギノ丸ゴシック ProN（Pro） | Hiragino Maru Gothic ProN W4 ヒラギノ丸ゴ ProN W4 Hiragino Maru Gothic Pro W4 ヒラギノ丸ゴ Pro W4 | ヒラギノ丸ゴシック ProN（Pro） | Hiragino Maru Gothic ProN W4 ヒラギノ丸ゴ ProN W4 Hiragino Maru Gothic Pro W4 ヒラギノ丸ゴ Pro W4 | ||
| MSゴシック | MS Gothic ＭＳ ゴシック | ||||
| MS Pゴシック | MS PGothic ＭＳ Ｐゴシック | ||||
| Osaka | Osaka | ||||
| 明朝体フォント | |||||
| MS 明朝 | MS Mincho ＭＳ 明朝 | ||||
| MS P明朝 | MS PMincho ＭＳ Ｐ明朝 | ||||
| 游明朝 | Yu Mincho 游明朝 | 游明朝 | YuMincho 游明朝体 | ||
| ヒラギノ明朝 ProN（Pro） | Hiragino Mincho ProN ヒラギノ明朝 ProN Hiragino Mincho Pro ヒラギノ明朝 Pro | ヒラギノ明朝 ProN（Pro） | Hiragino Mincho ProN ヒラギノ明朝 ProN Hiragino Mincho Pro ヒラギノ明朝 Pro | ||
| 欧文フォント | |||||
| Arial | Arial | Arial | Arial | Arial | Arial |
| Avenir | Avenir | Avenir | Avenir | ||
| Arial Black | Arial Black | Arial Black | Arial Black | ||
| Segoe UI | Segoe UI | ||||
| Helvetica | Helvetica | Helvetica | Helvetica | ||
| Helvetica Neue | Helvetica Neue | Helvetica Neue | Helvetica Neue | ||
| San Francisco | San Francisco | San Francisco | San Francisco | ||
| Verdana | Verdana | Verdana | Verdana | Verdana | Verdana |
| Times New Roman | Times New Roman | Times New Roman | Times New Roman | Times New Roman | Times New Roman |
font-familyの書き方
font-familyの書き方の決まり事
font-familyの書き方には規則があります。
おすすめのfont-familyの書き方の例
以上の規則の則って、font-familyを書いていけばよいのですが、以下におすすめの書き方が「サルワカ」さんの記事に書いてありましたので、以下に載せておきます。
おわりに
如何だったでしょうか？
font-familyとはどのようなもの？、フォントファミリー名、総称フォント名、主要なOSで利用されているフォントには何があるの？、font-familyの書き方はどうするの？、font-familyの書き方の決まり事、おすすめのfont-familyの書き方の例などについて解説してきました。
この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。
以上です。
コメント