概要
使用する書体を指定する。
- 特定のフォント名ではない総称がある
- フォント名は複数指定できる
- 複数指定された場合、前の方からサーチし、クライアント側にフォントがあればそれを使用
- 指定したフォントが存在しない場合、クライアント側のデフォルトフォントが使われる
書式
font-family: [フォント1] , [フォント2] , ...
- フォント名は引用符~ダブルクォート
(")
かシングルクォート(')
で囲む - ただし総称フォントを指定する場合は引用符で囲わない
フォント名
種類
sans-serif | ゴシック体などセリフがないフォント |
serif | ローマン体・明朝体などセリフがあるフォント |
monospace | 等幅のフォント |
cursive | 筆記体・草書体に属するフォント |
fantasy | 装飾的なフォント |
表示例
sans-serifはゴシック系のフォントです。
serifは明朝系のフォントです
monospaceは等幅のフォントです。
cursiveは筆記体・草書体のフォントです。
fantasyは装飾的なフォントです。
※総称フォントは引用符で囲いません
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<p style="font-family: san-serif;"> sans-serifはゴシック系のフォントです。 </p> <p style="font-family: serif;"> serifは明朝系のフォントです </p> <p style="font-family: monospace;"> monospaceは等幅のフォントです。 </p> <p style="font-family: cursive;"> cursiveは筆記体・草書体のフォントです。 </p> <p style="font-family: fantasy;"> fantasyは装飾的なフォントです。 </p> <p>※総称フォントは引用符で囲いません<p> |
複数指定
動作
フォントを複数指定することができる。各フォントは','
(カンマ)で区切り、スペースの有無は任意。
クライアントは前の方から順番にサーチし、表示対象に使用可能なフォントであればそれを使い、そうでなければ次のフォントを探す。
最終的に利用可能なフォントがなければクライアント側のデフォルトフォントが使われる。
表示例
フォントの複数指定~’YU Gothic UI’, sans-serif
フォントの複数指定~’存在しないゴシックフォント’, sans-serif
フォントの複数指定~’存在しない明朝フォント’, serif
1 2 3 4 5 6 7 8 9 |
<p style="font-family: 'YU Gothic UI', sans-serif"> フォントの複数指定~'YU Gothic UI', sans-serif </p> <p style="font-family: '存在しないゴシックフォント', sans-serif"> フォントの複数指定~'存在しないゴシックフォント', sans-serif </p> <p style="font-family: '存在しない明朝フォント', serif"> フォントの複数指定~'存在しない明朝フォント', serif </p> |