CSSのフォントの種類を指定する際に使用する「Font−family」の正しい記述方法は、デバイスに標準搭載されているフォントやWebフォントなどの技術の変化などで日々変わっています。
今回は最新のトレンドも踏まえた上で基本的なFont−familyの指定方法を再定義してみたいと思います。
Font−familyの書き方について新しい記事を書きました。こちらもぜひご覧ください。
Font−familyのベストな書き方 2017年版
Font−familyのベストな書き方 2018年改定版
CSSの記述・指定方法
基本中の基本ですが、CSSの指定方法についてさらっとご説明します。
- 適用優先度の高いフォントファミリーから記述する
- フォント名にスペースや全角文字が含まれている場合は、クォーテーション（「”"」「”」どちらでも可）で囲む
- フォントの英字名と日本語名を併記する場合は、日本語名を先に記述する
|
1 2 3 |
body{ font-family: Helvetica , "游ゴシック" , "Yu Gothic" , sans-serif; } |
1.英語フォントから指定していく
まずは英語フォントから指定します。理由は簡単で日本語フォントには半角英数字も含まれているので英語フォントを日本語フォントより後に指定してしまうと指定自体が無意味になってしまいます。
英語フォントはWeb Fontを使用する（推奨）
英語フォントの指定はWeb Fontを指定することでデバイス間の差異はほぼなくなります。オススメのGoogleフォントなどこのブログでも紹介していますのでご参考ください。
https://www.google.com/fonts（日本語もWebフォントが簡単（コスト的、トラフィック的な意味で）に使えればいいんですけどね・・・）
2.フォントの搭載状況を把握して指定する
デバイスのシェア率なども考慮して優先度を決めていきます。
ここで忘れてはいけないのがフォントとしての美しさです。Windows8.1以降に搭載された游ゴシック、游明朝は、それ以前のメイリオと比べ懐が狭くスマートで美しいフォントです。シェア率はVista以降に入っているメイリオの方が高いですがここは美しさを優先させて游ゴシックを先に記述します。またスマートフォンの搭載状況も考慮します。
| 游ゴシック | Windows8.1以降、MacOS10.9以降 |
|---|---|
| 游明朝 | Windows8.1以降、MacOS10.9以降 |
| メイリオ | Windows Vista以降 |
| Meiryo UI | Windows 7以降 |
| ＭＳ Ｐゴシック | Windows95以降 |
| ＭＳ Ｐ明朝 | Windows95以降 |
| ヒラギノ角ゴ Pro | Mac OS X以降 |
| ヒラギノ明朝 Pro | Mac OS X以降 |
| ヒラギノ角ゴ ProN | Mac OS 10.5以降、iOS |
| ヒラギノ明朝 ProN | Mac OS 10.5以降、iOS6以降 |
| Droid Sans | Android |
| Roboto | Android4以降 |
3.Windowsのアンチエイリアス対応を考慮する
WindowsのフォントはMacと違い、フォントや文字サイズによってアンチエイリアス（WindowsではClearTypeという機能）が効くものと効かないものがあるようです。Windows8.1から搭載の游ゴシッ ク、游明朝、Vistaから搭載のメイリオ以外は基本アンチエイリアスが効かずギザギザの細い文字になるようです。
■Windowsでのアンチエイリアス対応
| フォント名 | アンチエイリアス |
|---|---|
| 游ゴシック | ◯ |
| 游明朝 | ◯ |
| メイリオ | ◯ |
| Meiryo UI | ◯ |
| ＭＳ Ｐゴシック | × |
| ＭＳ Ｐ明朝 | × |
| HGS明朝E※ | ◯ |
※HGS明朝・・・Officeに同梱されているフォント
明朝系フォント指定は注意が必要！
明朝系のフォント指定は2015年６月現在、Androidは非対応、Windowsは「游明朝」がダメだとアンチエイリアスが効かない「ＭＳ Ｐ明朝」になってしまいます。割り切って指定するか、明朝系は指定しないか、判断が必要になります。
4.総称フォントファミリーを記述する
Font-familyの指定は見る人のブラウザに指定のフォントが入っていることが前提になります。万が一のために総称フォントファミリーというざっくり何系のフォントなのかの指定をすることで指定のフォントに対応していない環境でもある程度近いフォントをブラウザがあてがってくれます。
- sans-serif … ゴシック体系のフォント
- serif … 明朝体系のフォント
- cursive … 筆記体系のフォント
- fantasy … 装飾系のフォント
- monospace … 等幅系のフォント
※日本語のテキストに cursive を指定すると、一部の環境ではそのテキストが正常に表示されなくなってしまうようです。
上記を加味して私なりに最適なフォントファミリーをつくってみました！
・ゴシック体
|
1 2 3 4 |
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic); body{ font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif; } |
Mac10.8から搭載した洗練されたサンセリフ英字フォント「Avenir」を先頭に。
その後Googleフォント記載を追加。この辺りは好みによってきますがオーソドックスなサンセリフ体として「Open Sans」を選んでみました。
その後保険として「Helvetica Neue」「Helvetica」「Arial」「Verdana」と英語フォントを追記。
Android用フォント「Roboto」を挟んで、游ゴシックの記述を列記。
游ゴシックの記述はWindowsとMacで微妙に正規表示が違うので合計４種記述。
そのあとはMac10.8以前用に「ヒラギノ角ゴ Pro W3」、Windows7用に「Meiryo UI」、Vista用に「メイリオ」、それ以前のWindowsの受け皿として「ＭＳ Ｐゴシック」を足して完成です。
・明朝体
|
1 2 3 4 |
@import url(//fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700); body{ font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; } |
まずGoogleフォントの「Roboto Slab」これは形が綺麗なのとウェイトが複数ちゃんとあるので使い勝手が良さそうなのでしてしました。
続いて英字書体「Garamond」「Times New Roman」を追記し、日本語の「游明朝」「ヒラギノ明朝 Pro W3」としました。
Windowsの場合、シェア率の高い「ＭＳ Ｐ明朝」がアンチエイリアスに対応していないので、MicrosoftOfficeに入っている「HGS明朝E」も保険として追記しました。これでオフィスが入っているパソコンならアンチエイリアスが効くはずです。最後に「ＭＳ Ｐ明朝」を記述しておしまいです！
游ゴシック・明朝、Googleフォントが出てきて、この辺りの情報は日進月歩で日々アップデートしていくとおもいます。このブログでも随時トレンドを追っていきたいと思いますのでぜひチェックしてみてください。
