📙
Webで使えるフォントとfont-familyの使い方
font-familyの設定で迷ったので、これを機にWebのフォントについて理解するための備忘録。
HTMLで使えるフォントの分類
デバイスフォント
- OS標準フォント
- ユーザーがPCにインストールしたフォント
Windows標準
- UDデジタル教科書体（10〜）
- Yu Gothic UI（10〜）
- 游ゴシック体・游明朝体（8.1〜）
- Meiryo UI（7〜）
- メイリオ（vista〜）
- MSゴシック・MS明朝
- MSPゴシック・MSP明朝
- MS UI Gothic
MacOS標準
- ヒラギノ角ゴシック
- ヒラギノ明朝 ProN
- ヒラギノ丸ゴ ProN
- 游ゴシック体・游明朝体
- 游明朝体+36ポかな
- 凸版文久ゴシック・凸版文久明朝
- 凸版文久見出しゴシック・凸版文久見出し明朝
- 筑紫A丸ゴシック
- 筑紫B丸ゴシック
- クレー
- 游教科書体
- 游教科書体 横用
- Osaka
iOS
- ヒラギノ角ゴ ProN
Android
- Noto sans CJK JP（機種によって異なる場合あり）
Webフォント
- Webフォントサービスが提供するフォント
例：Google Fonts - サーバーにアップしWebフォント化したフォント
ちなみに僕は「Webフォントサービスが提供するフォント」をWebフォントと呼んでいました...😅
日本語Webフォントは重い！らしい😭
日本語フォントは常用漢字で約2,000字も存在するため、一般的に容量が数メガバイトになります。代表的なフォントとしてNoto Sans JPは1ウェイトあたり1.6MBです。RegularとBoldの2つのウェイトを使うと、3.2MBにも達します。Googleの推奨は1ページあたり1.6MBとされているので（参照）、ウェブフォントを導入すればすぐに推奨容量を超えてしまいます。
font-familyの使い方
基本的仕様
font-familyに指定したフォントは左から順に実行される。
先に日本語フォントを指定していると半角英数字で書かれたアルファベッドもすべて全角に変換されてしまう。したがって、英数字フォント→日本語フォントの順に指定する。
総称フォント名とフォントファミリー名
総称フォント名とは
総称フォント名は、フォントの種類のこと。
該当するフォントがデバイスに入ってない時のために、最後に指定することが多い。
こんな感じ↓
| フォントの種類 | 総称フォント名 | 該当するフォントの例 |
|---|---|---|
| 明朝体 | serif | 游明朝・ヒラギノ明朝 ProN W3・MS明朝 |
| ゴシック体 | sans-serif | ＭＳ Ｐゴシック・メイリオ・ヒラギノ角ゴシック・Arial |
| 等幅フォント | monospace | ＭＳ ゴシック・平成角ゴシック・ＭＳ 明朝・Courier |
| OSのUIとフォントが同じ | system-ui | Segoe UI・Yu Gothic UI・Meiryo・ヒラギノ角ゴシック |
| 筆記体 | cursive | Comic Sans MS・Script |
| 装飾に特化したフォント | fantasy | alba・Chick |
HTMLにfont-familyを指定する方法と使えるフォントの種類を紹介より
フォントファミリー名とは
font-familyの値に指定できる具体的なフォント。
例：ヒラギノ明朝 ProN W3
OSとブラウザのデフォルトフォント
OSとブラウザのデフォルトのフォントは以下の通り。
なんとなく把握しておくとデザインやデバッグに役立つかもです。
Windows 10
| ブラウザ | Sans-Serif(ゴシック) | Serif(明朝体) | Monospace(等幅) |
|---|---|---|---|
| Chrome | メイリオ | 游明朝 | MSゴシック(10pt) |
| Edge | メイリオ | 游明朝 | MSゴシック(10pt) |
MacOS 10.15
| ブラウザ | Sans-Serif(ゴシック) | Serif(明朝体) | Monospace(等幅) |
|---|---|---|---|
| Chrome | ヒラギノ明朝 ProN W3(欧文:NewYork) | ヒラギノ明朝 ProN W3 | Osaka等幅(10pt) |
| Safari | ヒラギノ角ゴシック W4 | ヒラギノ明朝 ProN W3(欧文:NewYork) | ヒラギノ角ゴシック W3(欧文:Courier) |
デバイス間での違いで気をつけること
参考サイト
Discussion