CSS の font-family プロパティは、特定のフォント名を記述する以外にもgeneric-familyという一般フォント名を指定することができる。
generic-family で指定できる値
| 値 | 内容 |
|---|---|
| serif | セリフ体。いわゆる明朝体。 |
| sans-serif | サンセリフ。いわゆるゴシック体。 |
| monospace | 等幅フォント |
| cursive | 筆記体 |
| fantasy | 装飾の多い文字 |
ただし、これらの指定は、インストールされているフォントからブラウザによって自動的に表示するファミリが選択される。
というわけで、実際にどのようなフォントがセレクトされるのか調査した。
iOS 7 / Mac X Mavericks
font-family: serif;
ヒラギノ明朝 Pro W3—111 glyphs
font-family: san-serif;
ヒラギノ角ゴ Pro W3—111 glyphs
font-family: monospace;
Osaka—111 glyphs
font-family: cursive;
ヒラギノ明朝 ProN W3—75 glyphs
Apple Chancery—36 glyphs
font-family: fantasy;
ヒラギノ角ゴ ProN W3—75 glyphs
Papyrus—36 glyphs
Windows 7
font-family: serif;
MS P明朝—111 glyphs
font-family: san-serif;
MS Pゴシック—111 glyphs
font-family: monospace;
MS ゴシック—111 glyphs
font-family: cursive;
MS Pゴシック—75 glyphs
Comic Sans MS—36 glyphs
font-family: fantasy;
MS Pゴシック—75 glyphs
Impact—36 glyphs
Android 4
Roboto / モトヤフォントのセリフ・サンセリフが表示される。