ホーム >>> HTML整理ノート

フォントの種類　font-familyスタイル

使用するフォントの種類を指定。（例　font-family:"ＭＳ ゴシック"）
半角カンマ(,)で区切り複数指定できる。
　　（例の　font-family:"ＭＳ ゴシック","Arial Black",sans-serif）
　*先頭から記述順に適用され、そのフォントが無い場合順次マシン内を探していく。
　 それでも存在しない時は，WWWプラウザの標準フォントで代用される。

特定のフォント名(family-name)ではなく、同種のフォント系統名(generic font family)を指定することもできる。
　・serif ：明朝体系列、髭付きフォント
　　　　　(例：Times、Century、日本語では明朝系フォント)
　・sans-serif：ゴシック体系列、髭無しフォント
　　　　　(例：Helvetica、Arial、日本語ではゴシック系)
　・cursive ：当幅系列、筆記体・草書体調フォント(例：Zapf-Chancery)
　・fantasy ：装飾的なフォント (例：Western)
　・monospace ：ＰＯＰ体系列、等幅フォント(例：Courier)

　(例　font-family:"ＭＳ ゴシック",arial,sans-serif}
*フォント系統名を設定していると、どのフォントも使えない場合、フォント系統名に属するフォントの中から，マシンにInstallされているものを使用環境に応じて適用される。

Sample
  • font-family:ＭＳ ゴシック
  • font-family:ＭＳ 明朝
  • font-family:arial  日本語表示は
  • font-family:MS Sans Serif  日本語表示は
  • font-family:Times New Roman   日本語表示は
  • font-family:Comic Sans MS  日本語表示は
  • font-family:Arial Black  日本語表示は

以下はフォント系統名(generic font family)だけを設定した例

  • (serif )明朝体系列、髭付きフォント、日本語では明朝系 　 　
  • (sans-serif)ゴシック体系列、髭無しフォント、日本語ではゴシック系 　 　
  • (cursive)当幅系列、筆記体・草書体調フォント 　 　
  • (fantasy)装飾的なフォント 　 　
  • (monospace)ＰＯＰ体系列、等幅フォント
Script プロパティ･･･＜fontFamily＞

下の文字にマウスを載せるとフォントの種類が変化します。

CSS Style

Sample Source......................................................................>>>

<ul>
  <li style="font-family:ＭＳ ゴシック">font-family:ＭＳ ゴシック
  <li style="font-family:ＭＳ 明朝">font-family:ＭＳ 明朝
  <li style="font-family:arial">font-family:arial&nbsp; 日本語表示は
  <li style="font-family:MS Sans Serif">font-family:MS Sans Serif&nbsp; 日本語表示は
  <li style="font-family:Times New Roman">font-family:Times New Roman &nbsp; 日本語表示は
  <li style="font-family:Comic Sans MS">font-family:Comic Sans MS&nbsp; 日本語表示は
  <li style="font-family:Arial Black">font-family:Arial Black&nbsp; 日本語表示は
</ul>
<p>以下はフォント系統名(generic font family)だけを設定した例</p>

<ul>
  <li style="font-family:serif">(serif )明朝体系列、髭付きフォント、日本語では明朝系 　
　<li style="font-family:sans-serif">(sans-serif)
　　　　　　　ゴシック体系列、髭無しフォント、日本語ではゴシック系 　
　<li style="font-family:cursive">(cursive)当幅系列、筆記体・草書体調フォント 　
　<li style="font-family:fantasy">(fantasy)装飾的なフォント 　
　<li style="font-family:monospace">(monospace)ＰＯＰ体系列、等幅フォント
</ul>

<div style="width:250;height:40;color:green;
               font:bold 20pt 'Broadway BT';text-align:center;cursor:hand" 
  onmouseover="this.style.fontFamily='Arial Black';this.style.color='red'" 
  onmouseout="this.style.fontFamily='Broadway BT';this.style.color='green';">
  CSS Style
</div>