4. Supplement
4-D.日本語フォント
最近のWindowsに最初から標準で入っている日本語フォントを中心に比較してみます。 Windows版IEやFirefoxでは互換性がありますが、Mac版IEでどのくらい互換性があるかはまだ調べてません。・WindowsにおけるIE6、IE7、Firefoxの標準日本語フォントは「MS Pゴシック」です。
・Mac OS X以降では「ヒラギノ～」が使われています。
・Mac OS 9以前の標準フォントは「平成明朝」と「Osaka」です。
※Netscape, Safariの古いバージョンなどでは期待どおりの表示にならない場合があります。
日本語フォントいろいろ(Windows)
一部ブラウザでは文字サイズを大きくしていくと、25pxあたりから文字にアンチエイリアスがかかって表示が滑らかになります。 太字の方が美しく見えるフォントもあるので、用途によって使い分けるのも一案です。ただ、文字サイズをpx指定で固定すると、ブラウザ側での文字サイズ切替機能が使えなくなるので、 通常は「%」「em」などの相対指定を行ってください。
フォント指定タグの書き方：
ＭＳ Ｐゴシック (プロポーショナルフォント)
これはＭＳ Ｐゴシックの13pxです。
これはＭＳ Ｐゴシックの15pxです。
これはＭＳ Ｐゴシックの17pxです。
これはＭＳ Ｐゴシックの20pxです。
これはＭＳ Ｐゴシックの24pxです。
これはＭＳ Ｐゴシックの28pxです。
これはＭＳ Ｐゴシックの32pxです。
ＭＳ ゴシック (等幅フォント)
これはＭＳ ゴシックの13pxです。
これはＭＳ ゴシックの15pxです。
これはＭＳ ゴシックの17pxです。
これはＭＳ ゴシックの20pxです。
これはＭＳ ゴシックの24pxです。
これはＭＳ ゴシックの28pxです。
これはＭＳ ゴシックの32pxです。
MS UI Gothic (ユーザインタフェース用フォント)
これはMS UI Gothicの13pxです。
これはMS UI Gothicの15pxです。
これはMS UI Gothicの17pxです。
これはMS UI Gothicの20pxです。
これはMS UI Gothicの24pxです。
これはMS UI Gothicの28pxです。
これはMS UI Gothicの32pxです。
ＭＳ Ｐ明朝 (プロポーショナルフォント)
これはＭＳ Ｐ明朝の13pxです。
これはＭＳ Ｐ明朝の15pxです。
これはＭＳ Ｐ明朝の17pxです。
これはＭＳ Ｐ明朝の20pxです。
これはＭＳ Ｐ明朝の24pxです。
これはＭＳ Ｐ明朝の28pxです。
これはＭＳ Ｐ明朝の32pxです。
ＭＳ 明朝 (等幅フォント)
これはＭＳ 明朝の13pxです。
これはＭＳ 明朝の15pxです。
これはＭＳ 明朝の17pxです。
これはＭＳ 明朝の20pxです。
これはＭＳ 明朝の24pxです。
これはＭＳ 明朝の28pxです。
これはＭＳ 明朝の32pxです。
HG正楷書体-PRO (プロポーショナルフォント)
これはHG正楷書体-PROの13pxです。
これはHG正楷書体-PROの15pxです。
これはHG正楷書体-PROの17pxです。
これはHG正楷書体-PROの20pxです。
これはHG正楷書体-PROの24pxです。
これはHG正楷書体-PROの28pxです。
これはHG正楷書体-PROの32pxです。
HGPｺﾞｼｯｸE (プロポーショナルフォント、全サイズアンチエイリアス)
これはHGPｺﾞｼｯｸEの13pxです。
これはHGPｺﾞｼｯｸEの15pxです。
これはHGPｺﾞｼｯｸEの17pxです。
これはHGPｺﾞｼｯｸEの20pxです。
これはHGPｺﾞｼｯｸEの24pxです。
これはHGPｺﾞｼｯｸEの28pxです。
これはHGPｺﾞｼｯｸEの32pxです。
HG丸ｺﾞｼｯｸM-PRO
これはHG丸ｺﾞｼｯｸM-PROの13pxです。
これはHG丸ｺﾞｼｯｸM-PROの15pxです。
これはHG丸ｺﾞｼｯｸM-PROの17pxです。
これはHG丸ｺﾞｼｯｸM-PROの20pxです。
これはHG丸ｺﾞｼｯｸM-PROの24pxです。
これはHG丸ｺﾞｼｯｸM-PROの28pxです。
これはHG丸ｺﾞｼｯｸM-PROの32pxです。
HG創英角ﾎﾟｯﾌﾟ体 (プロポーショナル)
これはHG創英角ﾎﾟｯﾌﾟ体の13pxです。
これはHG創英角ﾎﾟｯﾌﾟ体の15pxです。
これはHG創英角ﾎﾟｯﾌﾟ体の17pxです。
これはHG創英角ﾎﾟｯﾌﾟ体の20pxです。
これはHG創英角ﾎﾟｯﾌﾟ体の24pxです。
これはHG創英角ﾎﾟｯﾌﾟ体の28pxです。
これはHG創英角ﾎﾟｯﾌﾟ体の32pxです。
これはＭＳ Ｐゴシックの13pxです。
これはＭＳ Ｐゴシックの15pxです。
これはＭＳ Ｐゴシックの17pxです。
これはＭＳ Ｐゴシックの20pxです。
これはＭＳ Ｐゴシックの24pxです。
これはＭＳ Ｐゴシックの28pxです。
これはＭＳ Ｐゴシックの32pxです。
ＭＳ ゴシック (等幅フォント)
これはＭＳ ゴシックの13pxです。
これはＭＳ ゴシックの15pxです。
これはＭＳ ゴシックの17pxです。
これはＭＳ ゴシックの20pxです。
これはＭＳ ゴシックの24pxです。
これはＭＳ ゴシックの28pxです。
これはＭＳ ゴシックの32pxです。
MS UI Gothic (ユーザインタフェース用フォント)
これはMS UI Gothicの13pxです。
これはMS UI Gothicの15pxです。
これはMS UI Gothicの17pxです。
これはMS UI Gothicの20pxです。
これはMS UI Gothicの24pxです。
これはMS UI Gothicの28pxです。
これはMS UI Gothicの32pxです。
ＭＳ Ｐ明朝 (プロポーショナルフォント)
これはＭＳ Ｐ明朝の13pxです。
これはＭＳ Ｐ明朝の15pxです。
これはＭＳ Ｐ明朝の17pxです。
これはＭＳ Ｐ明朝の20pxです。
これはＭＳ Ｐ明朝の24pxです。
これはＭＳ Ｐ明朝の28pxです。
これはＭＳ Ｐ明朝の32pxです。
ＭＳ 明朝 (等幅フォント)
これはＭＳ 明朝の13pxです。
これはＭＳ 明朝の15pxです。
これはＭＳ 明朝の17pxです。
これはＭＳ 明朝の20pxです。
これはＭＳ 明朝の24pxです。
これはＭＳ 明朝の28pxです。
これはＭＳ 明朝の32pxです。
HG正楷書体-PRO (プロポーショナルフォント)
これはHG正楷書体-PROの13pxです。
これはHG正楷書体-PROの15pxです。
これはHG正楷書体-PROの17pxです。
これはHG正楷書体-PROの20pxです。
これはHG正楷書体-PROの24pxです。
これはHG正楷書体-PROの28pxです。
これはHG正楷書体-PROの32pxです。
HGPｺﾞｼｯｸE (プロポーショナルフォント、全サイズアンチエイリアス)
これはHGPｺﾞｼｯｸEの13pxです。
これはHGPｺﾞｼｯｸEの15pxです。
これはHGPｺﾞｼｯｸEの17pxです。
これはHGPｺﾞｼｯｸEの20pxです。
これはHGPｺﾞｼｯｸEの24pxです。
これはHGPｺﾞｼｯｸEの28pxです。
これはHGPｺﾞｼｯｸEの32pxです。
HG丸ｺﾞｼｯｸM-PRO
これはHG丸ｺﾞｼｯｸM-PROの13pxです。
これはHG丸ｺﾞｼｯｸM-PROの15pxです。
これはHG丸ｺﾞｼｯｸM-PROの17pxです。
これはHG丸ｺﾞｼｯｸM-PROの20pxです。
これはHG丸ｺﾞｼｯｸM-PROの24pxです。
これはHG丸ｺﾞｼｯｸM-PROの28pxです。
これはHG丸ｺﾞｼｯｸM-PROの32pxです。
HG創英角ﾎﾟｯﾌﾟ体 (プロポーショナル)
これはHG創英角ﾎﾟｯﾌﾟ体の13pxです。
これはHG創英角ﾎﾟｯﾌﾟ体の15pxです。
これはHG創英角ﾎﾟｯﾌﾟ体の17pxです。
これはHG創英角ﾎﾟｯﾌﾟ体の20pxです。
これはHG創英角ﾎﾟｯﾌﾟ体の24pxです。
これはHG創英角ﾎﾟｯﾌﾟ体の28pxです。
これはHG創英角ﾎﾟｯﾌﾟ体の32pxです。
CSS標準フォントについて(Windows)
CSS標準の分類名(serif, sans-serif, cursive, fantasy等)による指定した場合、実際に表示されるフォントは環境や設定によって異なりますので注意してください。 自分のPCで見えている書体が他の人のPCで同じに再現されるとは限りません。ブラウザが異なっても全く違った表示になります(試しにIEとFirefoxで違いを見比べてください)。
serif セリフ体(IEではMS P明朝、FirefoxではMS UI Gothicで表示されます)
これはserifの13pxです。
これはserifの15pxです。
これはserifの17pxです。
これはserifの20pxです。
これはserifの24pxです。
これはserifの28pxです。
これはserifの32pxです。
sans-serif サンセリフ体 (IE、Firefox共にMS UI Gothicで表示されます)
これはsans-serifの13pxです。
これはsans-serifの15pxです。
これはsans-serifの17pxです。
これはsans-serifの20pxです。
これはsans-serifの24pxです。
これはsans-serifの28pxです。
これはsans-serifの32pxです。
cursive (草書体系) ※環境によって異なります。非推奨
これはcursiveの13pxです。
これはcursiveの15pxです。
これはcursiveの17pxです。
これはcursiveの20pxです。
これはcursiveの24pxです。
これはcursiveの28pxです。
これはcursiveの32pxです。
fantasy (装飾系) ※環境によって異なります。非推奨
これはfantasyの13pxです。
これはfantasyの15pxです。
これはfantasyの17pxです。
これはfantasyの20pxです。
これはfantasyの24pxです。
これはfantasyの28pxです。
これはfantasyの32pxです。
monospace (等幅)
これはmonospaceの13pxです。
これはmonospaceの15pxです。
これはmonospaceの17pxです。
これはmonospaceの20pxです。
これはmonospaceの24pxです。
これはmonospaceの28pxです。
これはmonospaceの32pxです。
これはserifの13pxです。
これはserifの15pxです。
これはserifの17pxです。
これはserifの20pxです。
これはserifの24pxです。
これはserifの28pxです。
これはserifの32pxです。
sans-serif サンセリフ体 (IE、Firefox共にMS UI Gothicで表示されます)
これはsans-serifの13pxです。
これはsans-serifの15pxです。
これはsans-serifの17pxです。
これはsans-serifの20pxです。
これはsans-serifの24pxです。
これはsans-serifの28pxです。
これはsans-serifの32pxです。
cursive (草書体系) ※環境によって異なります。非推奨
これはcursiveの13pxです。
これはcursiveの15pxです。
これはcursiveの17pxです。
これはcursiveの20pxです。
これはcursiveの24pxです。
これはcursiveの28pxです。
これはcursiveの32pxです。
fantasy (装飾系) ※環境によって異なります。非推奨
これはfantasyの13pxです。
これはfantasyの15pxです。
これはfantasyの17pxです。
これはfantasyの20pxです。
これはfantasyの24pxです。
これはfantasyの28pxです。
これはfantasyの32pxです。
monospace (等幅)
これはmonospaceの13pxです。
これはmonospaceの15pxです。
これはmonospaceの17pxです。
これはmonospaceの20pxです。
これはmonospaceの24pxです。
これはmonospaceの28pxです。
これはmonospaceの32pxです。
日本語フォントいろいろ(Mac)
Osaka Mac用 (WindowsではMS Pゴシックで表示されます)
これはOsakaの13pxです。
これはOsakaの15pxです。
これはOsakaの17pxです。
これはOsakaの20pxです。
これはOsakaの24pxです。
これはOsakaの28pxです。
これはOsakaの32pxです。
ヒラギノ角ゴ Pro W3 Mac用 (WindowsではMS Pゴシックで表示されます)
これはヒラギノ角ゴの13pxです。
これはヒラギノ角ゴの15pxです。
これはヒラギノ角ゴの17pxです。
これはヒラギノ角ゴの20pxです。
これはヒラギノ角ゴの24pxです。
これはヒラギノ角ゴの28pxです。
これはヒラギノ角ゴの32pxです。
これはOsakaの13pxです。
これはOsakaの15pxです。
これはOsakaの17pxです。
これはOsakaの20pxです。
これはOsakaの24pxです。
これはOsakaの28pxです。
これはOsakaの32pxです。
ヒラギノ角ゴ Pro W3 Mac用 (WindowsではMS Pゴシックで表示されます)
これはヒラギノ角ゴの13pxです。
これはヒラギノ角ゴの15pxです。
これはヒラギノ角ゴの17pxです。
これはヒラギノ角ゴの20pxです。
これはヒラギノ角ゴの24pxです。
これはヒラギノ角ゴの28pxです。
これはヒラギノ角ゴの32pxです。