CSS - font-family

トップ > CSSリファレンス > font-family

概要

属性名 font-family
<font>[, <font>]*
値の詳細 <font> = <family-name> | <generic-family>
初期値ユーザエージェントに依存
適用可能要素すべての要素
継承継承する
メディアVisual / Font
サポートC1 / e3 / N4 / Fx1 / Ch1 / Op3.5 / Sa1

説明

フォントファミリを指定します。

説明
<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.

Copyright (C) 1997-2012 杜甫々
初版:1997年7月27日、最終更新:2013年3月17日
http://www.tohoho-web.com/css/prop/font-family.htm