Font Family
フォントの書体を指定します。
HTMLの<FONT FACE="★">と同じ機能です。HTML 4.01で<FONT>タグは、非推奨要素となり、スタイルシートで指定指定するように推奨しています。
値は、フォント名や汎用フォントファミリー名で指定します。
●関連プロパティ
{ font-family : Family Name | Generic Family Name }
フォントファミリー名
フォントファミリー名は、フォント名を指します。フォント名は、ワープロなどソフトで表示されているフォント名で指定します。（ファイル名ではありません。
例. ARIAL.TTF）
「Arial」の場合「Arial Bold」や「Arial Italic」がありますが、「Arial」がフォントファミリー名になります。
Times New Romanのようにスペースが入るフォント名の場合、""で囲むように推奨しています。ＭＳ Ｐゴシックの場合、全角のＭＳに半角スペースＰゴシックが全角になります。
{ font-family : Family Name }
font-family:"ＭＳ Ｐゴシック",Osaka;
フォントファミリー ＭＳ Ｐゴシック、Ｏｓａｋａ
font-family:"ＭＳ Ｐ明朝", 細明朝, リュウミンL;
フォントファミリー ＭＳ Ｐ明朝、細明朝
font-family: Arial, Helvetica;
Font Family Arial, Helvetica
font-family: "Times New Roman", Times;
Font Family Times New Roman, Times
汎用ファミリー名
汎用ファミリー名は、フォントファミリー名のようにフォントを指定するのではなく、フォントの種類のキーワードで指定します。
キーワードは5種類で、指定されるフォントはブラウザが、PCにインストールされているフォントの中から選択します。したがって、表示するPCによってフォントは異なります。
{ font-family : Generic Family Name }
font-family: serif;
Serif
font-family: sans-serif
Sans Serif
font-family: cursive;
Cursive
font-family: fantasy;
Fantasy
font-family: monospace
Monospace
複数のフォントファミリー
フォントは、ブラウザにあるフォントに依存します。 指定したフォントがない場合、次の候補のフォントを指定して代用することができます。
サンプルは、「HGPｺﾞｼｯｸE」を指定し、「ＭＳ Ｐゴシック」を代用しています。「HGP明朝E」の場合は、「ＭＳ Ｐ明朝」を指定して代用しています。
Macintosh用に、ゴシックはＭＳ ゴシックとOsaka。明朝には、ＭＳ 明朝と細明朝を指定しています。
ただし、代用するフォントのフォント自体の大きさや字送りが異なるため、表示位置やスペースが変わります。
{ font-family : Family Name , Family Name | Generic Family Name...... }
font-family: "HGPｺﾞｼｯｸE","ＭＳ Ｐゴシック","ＭＳ ゴシック", Osaka;
フォントはＨＧＰゴシックＥですが、ない場合ＭＳ Ｐゴシックになります。
font-family:"HGP明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝", 細明朝 ;
フォントはＨＧＰ明朝ですが、ない場合ＭＳ Ｐ明朝になります。
Windowsの標準フォント
フォントをイメージ通り表示するには、Windowsの標準フォントを指定するのが間違いありません。 サンプルはWindows98標準インストールフォントです。Internet ExplorerやOfficeをインストールすると、追加されます。 Macintoshも、Internet Explorerをインストールすると、Windowsの標準欧文フォントがインストールされます。
font-family: ＭＳ ゴシック;
Windows標準フォント ＭＳ ゴシック
font-family: ＭＳ Ｐゴシック;
Windows標準フォント ＭＳ Ｐゴシック
font-family: ＭＳ 明朝;
Windows標準フォント ＭＳ 明朝
font-family: ＭＳ Ｐ明朝;
Windows標準フォント ＭＳ Ｐ明朝
font-family: Arial;
Windows Standard Font Arial
font-family: Arial Black;
Windows Standard Font Arial Black
font-family: Courier New;
Windows Standard Font Courier New
font-family: Comic Sans MS
Windows Standard Font Comic Sans MS
font-family: Impact;
Windows Standard Font Impact
font-family: Lucida Console;
Windows Standard Font Lucida Console
font-family: Marlett;
1234567890qwer
font-family: Symbol;
1234567890QAWSEDqawsed
font-family: Tahoma;
Windows Standard Font Tahoma
font-family: Times New Roman;
Windows Standard Font Times New Roman
font-family: Verdana;
Windows Standard Font Verdana
font-family: Webdings;
1234567890qwerasdf
font-family: Wingdings;
1234567890qwerasdf
Macintoshのフォント
WindowsとMacintoshでは、フォントが異なります。MacintoshのInternet Explorerには、ArialなどWindowsの標準欧文フォントが用意されています。また、MacintoshのOfficeには、ＭＳ
ゴシックなど和文フォントも用意されています。
Macintoshへの代用フォント例を紹介します。和文は、Osaka以外は統一されていないと考えた方が良いかも知れません。
※MacintoshのIEでは、代用フォントで表示できていません。
| Windows | Macintosh IE・Office | Macintosh OS |
|---|---|---|
| ＭＳ Ｐゴシック | ＭＳ ゴシック (Office) | Osaka・中ゴシック・平成ゴシック |
| ＭＳ ゴシック | Osaka-等幅・等幅ゴシック | |
| MS Ｐ明朝 | ＭＳ 明朝 (Office) | 細明朝・平成明朝 |
| MS 明朝 | 等幅明朝 | |
| Arial | Arial | Helvetica |
| Times New Roman | Times New Roman | Times |
| Courier New | Courier New | Courier |
| Comic Sans MS | Comic Sans MS | none |
| Lucida Console | Lucida Console | none |
| Tahoma | Tahoma | none |
| Verdana | Verdana | none |
| Webdings | Webdings | none |
| Wingdings | Wingdings | none |
書体のフォントサイズ
フォントによって文字の大きさが異なります。代用したフォントによっては文字の大きさや行間が違って表示されます。
サンプルは全て26pxです。
font-family: ＭＳ Ｐゴシック;
Font Family ＭＳ Ｐゴシック
font-family: ＭＳ Ｐ明朝;
Font Family ＭＳ Ｐ明朝
font-family: Arial;
Font Family Arial
font-family: Times New Roman;
Font Family Times New Roman
font-family: Courier New;
Font Family Courier New
font-family: Comic Sans MS;
Font Family Comic Sans MS
font-family: Impact;
Font Family Impact
装飾フォント
Windowsには、装飾フォントがインストールされます。また、Internet Explorerをインストールと追加装飾フォントが入ります。 装飾フォントを活用しますと、画像を使わなくて済みますから、軽いWebを作ることができます。
※Netscapeは、WindingsとWebdingsの表示が不安定です。
font-family: Wingdings;
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| A | B | C | D | E | F | G | H |
| a | b | c | d | e | f | g | h |
font-family: Webdings;
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| A | B | C | D | E | F | G | H |
| a | b | c | d | e | f | g | h |
 |
 |
|---|
