フォントファミリを指定します。
値 | 説明 |
<family-name> | システムにインストールされているフォント、または、@font-face で定義したフォントを指定します。 |
<generic-family> | CSS で定義される名前(下記参照)を指定します。 |
<generic-family> として、下記のものが定義されています。システムにインストールされたフォントから、下記の意味に近いフォントが自動選択されます。
値 | 説明 |
serif | セリフ(書体の終端部につけられる突起)付きのフォント。明朝体や Times など。 |
sans-serif | サンセリフは「セリフが無い」の意味。書体終端部の突起の無いフォント。ゴシック体や Helvetica など。 |
cursive | 筆記体。 |
fantasy | 装飾の多い文字。Western など。 |
monospace | 等幅フォント。Courier など。 |
フォントをカンマで区切って複数指定すると、最初のものから順に探し、最初に見つかったフォントを利用します。下記の例では、Windows では「メイリオ」が無ければ「MS Pゴシック」、Mac では「ヒラギノ角ゴシック」が無ければ Osaka、いずれも無ければ sans-serif フォントを利用します。
font-family: "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
HTML
<table>
<tr><td>serif</td><td style="font-family: serif">謹賀新年 / おめでとう / Happy New Year.</td></tr>
<tr><td>sans-serif</td><td style="font-family: sans-serif">謹賀新年 / おめでとう / Happy New Year.</td></tr>
<tr><td>cursive</td><td style="font-family: cursive">謹賀新年 / おめでとう / Happy New Year.</td></tr>
<tr><td>fantasy</td><td style="font-family: fantasy">謹賀新年 / おめでとう / Happy New Year.</td></tr>
<tr><td>monospace</td><td style="font-family: monospace">謹賀新年 / おめでとう / Happy New Year.</td></tr>
<tr><td>メイリオ</td><td style="font-family: 'メイリオ'">謹賀新年 / おめでとう / Happy New Year.</td></tr>
<tr><td>MS ゴシック</td><td style="font-family: 'MS ゴシック'">謹賀新年 / おめでとう / Happy New Year.</td></tr>
<tr><td>MS Pゴシック</td><td style="font-family: 'MS Pゴシック'">謹賀新年 / おめでとう / Happy New Year.</td></tr>
<tr><td>MS 明朝</td><td style="font-family: 'MS 明朝'">謹賀新年 / おめでとう / Happy New Year.</td></tr>
<tr><td>MS P明朝</td><td style="font-family: 'MS P明朝'">謹賀新年 / おめでとう / Happy New Year.</td></tr>
<tr><td>MS UI Gothic</td><td style="font-family: 'MS UI Gothic'">謹賀新年 / おめでとう / Happy New Year.</td></tr>
</table>
表示
serif | 謹賀新年 / おめでとう / Happy New Year. |
sans-serif | 謹賀新年 / おめでとう / Happy New Year. |
cursive | 謹賀新年 / おめでとう / Happy New Year. |
fantasy | 謹賀新年 / おめでとう / Happy New Year. |
monospace | 謹賀新年 / おめでとう / Happy New Year. |
メイリオ | 謹賀新年 / おめでとう / Happy New Year. |
MS ゴシック | 謹賀新年 / おめでとう / Happy New Year. |
MS Pゴシック | 謹賀新年 / おめでとう / Happy New Year. |
MS 明朝 | 謹賀新年 / おめでとう / Happy New Year. |
MS P明朝 | 謹賀新年 / おめでとう / Happy New Year. |
MS UI Gothic | 謹賀新年 / おめでとう / Happy New Year. |