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

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

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

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

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

Sample
  • font-family:MS ゴシック
  • font-family:MS 明朝
  • 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)POP体系列、等幅フォント
Script プロパティ・・・<fontFamily>

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

CSS Style

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

<ul>
  <li style="font-family:MS ゴシック">font-family:MS ゴシック
  <li style="font-family:MS 明朝">font-family:MS 明朝
  <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)POP体系列、等幅フォント
</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>