font-familyの設定(UTF-8版) - CSSめも

2021.4.1 移転しました...

 はてなブックマーク

※ このページはIEと他のブラウザではフォントの表示にかなり違いがあります!

目次

  1. 無指定が安全(?)
  2. 無指定
  3. プロポーショナル(ゴシック系)
  4. 等幅フォント
  5. IE比較
  6. AA表示
  7. 備考

無指定が安全(?)

ぶっちゃけー、数々の意見を鑑みて結論的なことを申し上げ奉りますることをワタクシ目にお許しいただけるのでありますならば、Webにて公開するページに関しまして、全体に対しては無指定にするのが良心的で最善な方法だと思います。なんとなれば、CSSでフォントの設定を致します際には Sans-Serif(ゴシック系プロポーショナル)などの一般名(種類名)を最後に指定するのが基本でございますが、デフォルトの設定を Sans-Serif ではなく Serif(明朝)などにされてる方も少なくないからでございます。

また余談ですが、Mozillaはデフォルトのフォント設定のままだと日本語のWebサイトもserif(つまり明朝体)で表示します。 全てのブラウザでゴシック体のフォントが標準というわけではないのです。

フォント名の指定は一般名と併用するべきです - Web標準普及プロジェクト

見映えについての事柄は、本来閲覧者側で選択可能にしておくべきものと考える次第であります。

などとエラソーなことを申し上げつつも、ワタクシ自身もそうなのでございますが、MS Pゴシック の英字フォントが年のせいかやや見辛く感じられるのであります。VerdanaArial などの英字フォントを指定してる場合も珍しいことではないと思ったりしているわけでございます。(ってか、自分で見るために書いているというか、俺様評価と言うのかなんなのか...よくわかりません)

指定する場合は先述の通り、基本的には一般名を最後に指定すればいいかと思いますが、IE6/IE7及びOpera ではちょっと注意しておく必要がございますです。。

ここがミソなり

IE6,IE7 では Sans-SerifMS Pゴシックではないことがあるのでおじゃります。英字が Lucida Sans Unicode になったり、かなが MS UI Gothic になることがありまする。

Opera では、1番目の指定フォントがあれへん時は最後に指定しとる一般名に設定されよるフォントが使われますねん。それ以外は無視されることがある?ちゅうわけ(多分でっせ...)。

Windowsの英字フォントはWindows 2000など ClearType が効かない環境では滲みが出たり、著しく見難いことがございますのです。XPと2000では見映えがかなり違ったりするのであります。

無指定

指定フォントがない場合は Sans-Serif ブラウザのデフォルト 設定のフォントで表示されます。

無指定比較
無指定あいうえおABCIQ WINDOWSabclw windows
Sans-serifあいうえおABCIQ WINDOWSabclw windows
SerifあいうえおABCIQ WINDOWSabclw windows
MonospaceあいうえおABCIQ WINDOWSabclw windows
メイリオあいうえおABCIQ WINDOWSabclw windows
MS PゴシックあいうえおABCIQ WINDOWSabclw windows
MS P明朝(※ Serif)あいうえおABCIQ WINDOWSabclw windows
MS ゴシック(※ 等幅)あいうえおABCIQ WINDOWSabclw windows
MS 明朝(※ Serif, 等幅)あいうえおABCIQ WINDOWSabclw windows
Times New Roman(※ Serif)あいうえおABCIQ WINDOWSabclw windows
Courier New (※ 等幅)あいうえおABCIQ WINDOWSabclw windows
ArialあいうえおABCIQ WINDOWSabclw windows

下記はWindows XP上 IE8 での画像です。

無指定比較

無指定比較 - UTF-8

プロポーショナル(ゴシック系)

一般名(種類名)で指定

デフォルト設定を Sans-Serif にしてる場合は無指定と同じになるはずが、私の環境ではIE6,IE7 で英字がなぜか Lucida Sans Unicode になります。charset が UTF-8 だと Arialゲイシヘンニダ)。Operaだと無指定の際の優先フォント(つまりデフォルト)と Sans-SerifSerif は別に設定できるので便利ですけどなぁ。

font-family: sans-serif;

指定フォントがない場合は Sans-Serif 設定のフォントで表示されます。

Sans-Serif 比較
無指定あいうえおABCIQ WINDOWSabclw windows
sans-serifあいうえおABCIQ WINDOWSabclw windows
メイリオあいうえおABCIQ WINDOWSabclw windows
MS PゴシックあいうえおABCIQ WINDOWSabclw windows
MS UI GothicあいうえおABCIQ WINDOWSabclw windows
ArialあいうえおABCIQ WINDOWSabclw windows
Lucida Sans UnicodeあいうえおABCIQ WINDOWSabclw windows
VerdanaあいうえおABCIQ WINDOWSabclw windows

下記はWindows XP上 IE8 での画像です。

Sans-Serif 比較

Sans-Serif 比較 - UTF-8

フォント名 + 一般名で指定

font-family: 'フォント名', sans-serif;

指定フォントがない場合は Sans-Serif 設定のフォントで表示されます。

プロポーショナル(ゴシック系)
無指定あいうえおABCIQ WINDOWSabclw windows
Sans-serifあいうえおABCIQ WINDOWSabclw windows
メイリオあいうえおABCIQ WINDOWSabclw windows
MS PゴシックあいうえおABCIQ WINDOWSabclw windows
MS UI GothicあいうえおABCIQ WINDOWSabclw windows
HGSゴシックMあいうえおABCIQ WINDOWSabclw windows
HGPゴシックMあいうえおABCIQ WINDOWSabclw windows
IPA PゴシックあいうえおABCIQ WINDOWSabclw windows
IPA モナー PゴシックあいうえおABCIQ WINDOWSabclw windows
VL PゴシックあいうえおABCIQ WINDOWSabclw windows
Takao PゴシックあいうえおABCIQ WINDOWSabclw windows
M+2P+IPAGあいうえおABCIQ WINDOWSabclw windows
Migu 1PあいうえおABCIQ WINDOWSabclw windows

下記はこれらののフォントをインストールした Windows XP上での画像です。

プロポーショナルゴシック

プロポーショナルゴシック - Firefox

プロポーショナル(ゴシック系英字)
無指定あいうえおABCIQ WINDOWSabclw windows
Sans-serifあいうえおABCIQ WINDOWSabclw windows
ArialあいうえおABCIQ WINDOWSabclw windows
VerdanaあいうえおABCIQ WINDOWSabclw windows
TahomaあいうえおABCIQ WINDOWSabclw windows
Lucida Sans UnicodeあいうえおABCIQ WINDOWSabclw windows
Times New Roman ※あいうえおABCIQ WINDOWSabclw windows

あう、Times New RomanSerif でした。(汗)

下記はこれらののフォントが元々入っているWindows XP上での画像です。

プロポーショナルゴシック英字

hogehoge

表示テスト
あいうえお aiueo AIUEO iI lL qQ Windows
あいうえお aiueo AIUEO iI lL qQ Windows
あいうえお aiueo AIUEO iI lL qQ Windows
あいうえお aiueo AIUEO iI lL qQ Windows
あいうえお aiueo AIUEO iI lL qQ Windows
あいうえお aiueo AIUEO iI lL qQ Windows
あいうえお aiueo AIUEO iI lL qQ Windows
あいうえお aiueo AIUEO iI lL qQ Windows
あいうえお aiueo AIUEO iI lL qQ Windows
あいうえお aiueo AIUEO iI lL qQ Windows

メイリオは平べったくて読みやすい(かな?)んですけど、なんかエライ上にヨッテますね。background-color 付ける場合は注意しといた方がいいかも。(私は合わす気なかったりして...汗)

等幅フォント

一般名(種類名)で指定

font-family: monospace;

指定フォントがない場合は monospace 設定のフォントで表示されます。

monospace 比較
monospaceあいうえおABCIQ WINDOWSabclw windows
MS ゴシックあいうえおABCIQ WINDOWSabclw windows
Courier NewあいうえおABCIQ WINDOWSabclw windows

下記はWindows XP上 IE8 での画像です。

monospace 比較

monospace 比較 - UTF-8

フォント名 + 一般名で指定

font-family: 'フォント名',monospace;

指定フォントがない場合は monospace 設定のフォントで表示されます。

等幅
monospaceあいうえおABCIQ WINDOWSabclw windows
MS ゴシックあいうえおABCIQ WINDOWSabclw windows
IPAゴシックあいうえおABCIQ WINDOWSabclw windows
IPA モナー ゴシックあいうえおABCIQ WINDOWSabclw windows
VL ゴシックあいうえおABCIQ WINDOWSabclw windows
TakaoゴシックあいうえおABCIQ WINDOWSabclw windows
M+2VM+IPAG circleあいうえおABCIQ WINDOWSabclw windows
Migu 1MあいうえおABCIQ WINDOWSabclw windows
等幅 英字のみ
Bitstream Vera Sans MonoあいうえおABCIQ WINDOWSabclw windows
Courier NewあいうえおABCIQ WINDOWSabclw windows
CourierあいうえおABCIQ WINDOWSabclw windows
ConsolasあいうえおABCIQ WINDOWSabclw windows

下記はこれらののフォントをインストールした Windows XP上での画像です。

等幅フォント

等幅フォント

等幅フォント

IE比較

IEはややこしいです。

IE の ClearType

IE 7,8 では、ClearType が有効になっている場合が多いかと思います。メイリオをきれいに表示するには有効になっている必要があります。

ClearType が無効だとメイリオはギザギザ表示、多くの欧文フォントは MS ゴシック 系と同様の糸状(?)表示となります。

但し、有効な場合はWindows上の VL Pゴシック などLinux系フォントは和文がつぶれ気味表示となります。メイリオVL Pゴシック など両方をきれいに表示するには、ClearType + gdi++ などの併用が必要になるかと。

下記はWindows XP上 IE8 での画像です。

  • ClearType 有効

hogehoge

  • ClearType 無効(※ 効果「標準」)

hogehoge

  • ClearType 有効 + gdi++.dll

hogehoge

とりあえず、XPと2000だけ...

IE 6(Windows 2000)
無指定Sans-Serifmonospace
欧文MS PゴシックLucida Sans UnicodeMS ゴシック
和文MS PゴシックMS UI GothicMS ゴシック
IE 7(Windows XP)
無指定Sans-Serifmonospace
欧文MS PゴシックLucida Sans UnicodeMS ゴシック
和文MS PゴシックMS PゴシックMS ゴシック
IE 8(Windows XP)
無指定Sans-Serifmonospace
欧文MS PゴシックMS PゴシックMS ゴシック
和文MS PゴシックMS PゴシックMS ゴシック

(htmlファイルの)charset が UTF-8 だとまたまただいぶ違いますね(Shift_JIS と EUC-JPは同じ模様)。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
IE 6 - UTF-8(Windows 2000)
無指定Sans-Serifmonospace
欧文Times New RomanArialCourier New
和文MS PゴシックMS PゴシックMS ゴシック
IE 7 - UTF-8(Windows XP)
無指定Sans-Serifmonospace
欧文Times New RomanArialCourier New
和文MS PゴシックMS PゴシックMS ゴシック
IE 8 - UTF-8(Windows XP)
無指定Sans-Serifmonospace
欧文Times New RomanArialCourier New
和文MS PゴシックMS PゴシックMS ゴシック

メイリオをデフォルトにしている環境では、MS Pゴシックが置換えされてました。

あと、Windows版Safariの標準フォントはLinux風で読みやすくて好きなのですが、等幅フォントは13pxで小っちゃいなぁと。(自分のPCなら変えたらいいんですけどねー)

Safari(Windows XP)
無指定Sans-Serifmonospace
欧文Times New RomanArialCourier New
和文MS PゴシックMS PゴシックMS ゴシック?

Macも確認しないと...orz。Linux or Firefox あたりはあんまり問題ない・・・ということにしておこう。(あくまでフォントに関して)

尚、UTF-8なページでのIEのデフォルト設定についてはユーザ側で変更可能だと思います。インターネットオプション→フォント→【ラテン語基本】

AA表示

【追記】font-familyMona を追加。

元々WindowsのMS Pゴシック を前提に作られてるものなのでWindowsでは指定しなくてもいい(※メイリオをデフォルトにしていない場合)のですが、pre要素を使う場合やLinux向けにはフォントの指定が必要となりますね。...Vista向けもでした。

font-family: 'MS Pゴシック',Monapo,'IPA モナー Pゴシック',IPAMonaPGothic,Mona,sans-serif;
/ ̄ ̄ ̄ ̄ ̄\ |  マイヤヒー♪ |           / ̄ ̄ ̄ ̄ ̄\ \___   __/          |  マイヤフー♪ | / ̄ ̄ ̄ ̄ ̄\      ∨               \___   __/ |  マイヤホー♪ |                            ∨       \__   ____/    ∩___∩              ∩____∩      ∨    | ノ     ヽ            /      ヽ|  ∩____∩   /  ●   ● |            | ●   ●  ヽ /      ヽ|   |    ( _●_)  ミ         彡   (_●_ )     | ●   ●  ヽ  彡、   |∪|  、`\        /     |∪|    彡  (_●_)    | / __  ヽノ /´>  )      (  <   ヽ ノ   /    |∪|    ミ (___)   / (_/         \_ )      (  <   ヽ ノ     ヽ

Linuxでは IPA モナー Pゴシック (IPAMonaPGothic, Mona) で表示可能ですね。

IPA モナー Pゴシック を先に指定した方がいいのかもしれません。但し、Windowsでもインストールされている場合に優先されてしまいますけど。

AA用CSS

スタイルシート

Linux 向けに IPA モナー Pゴシック (IPAMonaPGothic, Mona, Monapo) を指定してみましたが、Opera では2番目は無視される無視されることがある?(Vine Linux 4.2,Opera 9.27では問題なしでした)ので、Sans-Serif に IPA モナー Pゴシック を設定しておかないといけませんおいた方がいいのかもしれません

div.kuma {
white-space: pre !important;
margin: 3% auto 3% auto;
padding: 0.5em;
font-family: 'MS Pゴシック',Monapo,'IPA モナー Pゴシック',IPAMonaPGothic,Mona,sans-serif;
line-height: 110%;
letter-spacing: 0px;
font-size: 0.8em;
background-color: #f1f1f1;
border-style: solid;
border-width: 3px;
border-color: #fff #ccc #ccc #fff;
overflow: auto;
width: 90%;
}

HTMLは下記の記述でおkクマー。改行<br>タグは不要です。

<div class="kuma" title="クマーのAA">
ここに貼り付け

</div>
IEの互換モードではpre要素で

※あっと、 marginautoはIEの所謂互換モードでは効かない、white-space: preもだめな場合があるみたいなので、 pre要素を使う 左右marginを% で指定するべし。

pre.kuma2 {
margin: 3% 5% 3% 5%;
padding: 0.5em;
font-family: 'MS Pゴシック',Monapo,'IPA モナー Pゴシック',IPAMonaPGothic,Mona,sans-serif;
line-height: 110%;
letter-spacing: 0px;
font-size: 0.8em;
background-color: #f1f1f1;
border-style: solid;
border-width: 3px;
border-color: #fff #ccc #ccc #fff;
overflow: auto;
width: 90%;
_width:100%;
}

HTMLは下記でクマクマー。改行<br>タグは不要くまー。

<pre class="kuma2" title="クマーのAA">
ここに貼り付け

</pre>
/ ̄ ̄ ̄ ̄ ̄\
|  マイヤヒー♪ |           / ̄ ̄ ̄ ̄ ̄\
\___   __/          |  マイヤフー♪ | / ̄ ̄ ̄ ̄ ̄\
     ∨               \___   __/ |  マイヤホー♪ |
                           ∨       \__   ____/
   ∩___∩              ∩____∩      ∨
   | ノ     ヽ            /      ヽ|  ∩____∩
  /  ●   ● |            | ●   ●  ヽ /      ヽ|
  |    ( _●_)  ミ         彡   (_●_ )     | ●   ●  ヽ
 彡、   |∪|  、`\        /     |∪|    彡  (_●_)    |
/ __  ヽノ /´>  )      (  <   ヽ ノ   /    |∪|    ミ
(___)   / (_/         \_ )      (  <   ヽ ノ     ヽ

おかしかったらオシエテください。(汗)

表示テスト

「メイリオ」環境増えて来たので、Windowsでも指定が必要ですね。

/ ̄ ̄ ̄ ̄ ̄\ |  マイヤヒー♪ |           / ̄ ̄ ̄ ̄ ̄\ \___   __/          |  マイヤフー♪ | / ̄ ̄ ̄ ̄ ̄\      ∨               \___   __/ |  マイヤホー♪ |                            ∨       \__   ____/    ∩___∩              ∩____∩      ∨    | ノ     ヽ            /      ヽ|  ∩____∩   /  ●   ● |            | ●   ●  ヽ /      ヽ|   |    ( _●_)  ミ         彡   (_●_ )     | ●   ●  ヽ  彡、   |∪|  、`\        /     |∪|    彡  (_●_)    | / __  ヽノ /´>  )      (  <   ヽ ノ   /    |∪|    ミ (___)   / (_/         \_ )      (  <   ヽ ノ     ヽ
/ ̄ ̄ ̄ ̄ ̄\ |  マイヤヒー♪ |           / ̄ ̄ ̄ ̄ ̄\ \___   __/          |  マイヤフー♪ | / ̄ ̄ ̄ ̄ ̄\      ∨               \___   __/ |  マイヤホー♪ |                            ∨       \__   ____/    ∩___∩              ∩____∩      ∨    | ノ     ヽ            /      ヽ|  ∩____∩   /  ●   ● |            | ●   ●  ヽ /      ヽ|   |    ( _●_)  ミ         彡   (_●_ )     | ●   ●  ヽ  彡、   |∪|  、`\        /     |∪|    彡  (_●_)    | / __  ヽノ /´>  )      (  <   ヽ ノ   /    |∪|    ミ (___)   / (_/         \_ )      (  <   ヽ ノ     ヽ
/ ̄ ̄ ̄ ̄ ̄\ |  マイヤヒー♪ |           / ̄ ̄ ̄ ̄ ̄\ \___   __/          |  マイヤフー♪ | / ̄ ̄ ̄ ̄ ̄\      ∨               \___   __/ |  マイヤホー♪ |                            ∨       \__   ____/    ∩___∩              ∩____∩      ∨    | ノ     ヽ            /      ヽ|  ∩____∩   /  ●   ● |            | ●   ●  ヽ /      ヽ|   |    ( _●_)  ミ         彡   (_●_ )     | ●   ●  ヽ  彡、   |∪|  、`\        /     |∪|    彡  (_●_)    | / __  ヽノ /´>  )      (  <   ヽ ノ   /    |∪|    ミ (___)   / (_/         \_ )      (  <   ヽ ノ     ヽ
/ ̄ ̄ ̄ ̄ ̄\ |  マイヤヒー♪ |           / ̄ ̄ ̄ ̄ ̄\ \___   __/          |  マイヤフー♪ | / ̄ ̄ ̄ ̄ ̄\      ∨               \___   __/ |  マイヤホー♪ |                            ∨       \__   ____/    ∩___∩              ∩____∩      ∨    | ノ     ヽ            /      ヽ|  ∩____∩   /  ●   ● |            | ●   ●  ヽ /      ヽ|   |    ( _●_)  ミ         彡   (_●_ )     | ●   ●  ヽ  彡、   |∪|  、`\        /     |∪|    彡  (_●_)    | / __  ヽノ /´>  )      (  <   ヽ ノ   /    |∪|    ミ (___)   / (_/         \_ )      (  <   ヽ ノ     ヽ

Linux環境でチェックしませう。2番目の指定が無視されないかとか。

/ ̄ ̄ ̄ ̄ ̄\ |  マイヤヒー♪ |           / ̄ ̄ ̄ ̄ ̄\ \___   __/          |  マイヤフー♪ | / ̄ ̄ ̄ ̄ ̄\      ∨               \___   __/ |  マイヤホー♪ |                            ∨       \__   ____/    ∩___∩              ∩____∩      ∨    | ノ     ヽ            /      ヽ|  ∩____∩   /  ●   ● |            | ●   ●  ヽ /      ヽ|   |    ( _●_)  ミ         彡   (_●_ )     | ●   ●  ヽ  彡、   |∪|  、`\        /     |∪|    彡  (_●_)    | / __  ヽノ /´>  )      (  <   ヽ ノ   /    |∪|    ミ (___)   / (_/         \_ )      (  <   ヽ ノ     ヽ
/ ̄ ̄ ̄ ̄ ̄\ |  マイヤヒー♪ |           / ̄ ̄ ̄ ̄ ̄\ \___   __/          |  マイヤフー♪ | / ̄ ̄ ̄ ̄ ̄\      ∨               \___   __/ |  マイヤホー♪ |                            ∨       \__   ____/    ∩___∩              ∩____∩      ∨    | ノ     ヽ            /      ヽ|  ∩____∩   /  ●   ● |            | ●   ●  ヽ /      ヽ|   |    ( _●_)  ミ         彡   (_●_ )     | ●   ●  ヽ  彡、   |∪|  、`\        /     |∪|    彡  (_●_)    | / __  ヽノ /´>  )      (  <   ヽ ノ   /    |∪|    ミ (___)   / (_/         \_ )      (  <   ヽ ノ     ヽ
/ ̄ ̄ ̄ ̄ ̄\ |  マイヤヒー♪ |           / ̄ ̄ ̄ ̄ ̄\ \___   __/          |  マイヤフー♪ | / ̄ ̄ ̄ ̄ ̄\      ∨               \___   __/ |  マイヤホー♪ |                            ∨       \__   ____/    ∩___∩              ∩____∩      ∨    | ノ     ヽ            /      ヽ|  ∩____∩   /  ●   ● |            | ●   ●  ヽ /      ヽ|   |    ( _●_)  ミ         彡   (_●_ )     | ●   ●  ヽ  彡、   |∪|  、`\        /     |∪|    彡  (_●_)    | / __  ヽノ /´>  )      (  <   ヽ ノ   /    |∪|    ミ (___)   / (_/         \_ )      (  <   ヽ ノ     ヽ

/ ̄ ̄ ̄ ̄ ̄\ |  マイヤヒー♪ |           / ̄ ̄ ̄ ̄ ̄\ \___   __/          |  マイヤフー♪ | / ̄ ̄ ̄ ̄ ̄\      ∨               \___   __/ |  マイヤホー♪ |                            ∨       \__   ____/    ∩___∩              ∩____∩      ∨    | ノ     ヽ            /      ヽ|  ∩____∩   /  ●   ● |            | ●   ●  ヽ /      ヽ|   |    ( _●_)  ミ         彡   (_●_ )     | ●   ●  ヽ  彡、   |∪|  、`\        /     |∪|    彡  (_●_)    | / __  ヽノ /´>  )      (  <   ヽ ノ   /    |∪|    ミ (___)   / (_/         \_ )      (  <   ヽ ノ     ヽ
/ ̄ ̄ ̄ ̄ ̄\ |  マイヤヒー♪ |           / ̄ ̄ ̄ ̄ ̄\ \___   __/          |  マイヤフー♪ | / ̄ ̄ ̄ ̄ ̄\      ∨               \___   __/ |  マイヤホー♪ |                            ∨       \__   ____/    ∩___∩              ∩____∩      ∨    | ノ     ヽ            /      ヽ|  ∩____∩   /  ●   ● |            | ●   ●  ヽ /      ヽ|   |    ( _●_)  ミ         彡   (_●_ )     | ●   ●  ヽ  彡、   |∪|  、`\        /     |∪|    彡  (_●_)    | / __  ヽノ /´>  )      (  <   ヽ ノ   /    |∪|    ミ (___)   / (_/         \_ )      (  <   ヽ ノ     ヽ
/ ̄ ̄ ̄ ̄ ̄\ |  マイヤヒー♪ |           / ̄ ̄ ̄ ̄ ̄\ \___   __/          |  マイヤフー♪ | / ̄ ̄ ̄ ̄ ̄\      ∨               \___   __/ |  マイヤホー♪ |                            ∨       \__   ____/    ∩___∩              ∩____∩      ∨    | ノ     ヽ            /      ヽ|  ∩____∩   /  ●   ● |            | ●   ●  ヽ /      ヽ|   |    ( _●_)  ミ         彡   (_●_ )     | ●   ●  ヽ  彡、   |∪|  、`\        /     |∪|    彡  (_●_)    | / __  ヽノ /´>  )      (  <   ヽ ノ   /    |∪|    ミ (___)   / (_/         \_ )      (  <   ヽ ノ     ヽ

/ ̄ ̄ ̄ ̄ ̄\ |  マイヤヒー♪ |           / ̄ ̄ ̄ ̄ ̄\ \___   __/          |  マイヤフー♪ | / ̄ ̄ ̄ ̄ ̄\      ∨               \___   __/ |  マイヤホー♪ |                            ∨       \__   ____/    ∩___∩              ∩____∩      ∨    | ノ     ヽ            /      ヽ|  ∩____∩   /  ●   ● |            | ●   ●  ヽ /      ヽ|   |    ( _●_)  ミ         彡   (_●_ )     | ●   ●  ヽ  彡、   |∪|  、`\        /     |∪|    彡  (_●_)    | / __  ヽノ /´>  )      (  <   ヽ ノ   /    |∪|    ミ (___)   / (_/         \_ )      (  <   ヽ ノ     ヽ
/ ̄ ̄ ̄ ̄ ̄\ |  マイヤヒー♪ |           / ̄ ̄ ̄ ̄ ̄\ \___   __/          |  マイヤフー♪ | / ̄ ̄ ̄ ̄ ̄\      ∨               \___   __/ |  マイヤホー♪ |                            ∨       \__   ____/    ∩___∩              ∩____∩      ∨    | ノ     ヽ            /      ヽ|  ∩____∩   /  ●   ● |            | ●   ●  ヽ /      ヽ|   |    ( _●_)  ミ         彡   (_●_ )     | ●   ●  ヽ  彡、   |∪|  、`\        /     |∪|    彡  (_●_)    | / __  ヽノ /´>  )      (  <   ヽ ノ   /    |∪|    ミ (___)   / (_/         \_ )      (  <   ヽ ノ     ヽ

/ ̄ ̄ ̄ ̄ ̄\ |  マイヤヒー♪ |           / ̄ ̄ ̄ ̄ ̄\ \___   __/          |  マイヤフー♪ | / ̄ ̄ ̄ ̄ ̄\      ∨               \___   __/ |  マイヤホー♪ |                            ∨       \__   ____/    ∩___∩              ∩____∩      ∨    | ノ     ヽ            /      ヽ|  ∩____∩   /  ●   ● |            | ●   ●  ヽ /      ヽ|   |    ( _●_)  ミ         彡   (_●_ )     | ●   ●  ヽ  彡、   |∪|  、`\        /     |∪|    彡  (_●_)    | / __  ヽノ /´>  )      (  <   ヽ ノ   /    |∪|    ミ (___)   / (_/         \_ )      (  <   ヽ ノ     ヽ
/ ̄ ̄ ̄ ̄ ̄\ |  マイヤヒー♪ |           / ̄ ̄ ̄ ̄ ̄\ \___   __/          |  マイヤフー♪ | / ̄ ̄ ̄ ̄ ̄\      ∨               \___   __/ |  マイヤホー♪ |                            ∨       \__   ____/    ∩___∩              ∩____∩      ∨    | ノ     ヽ            /      ヽ|  ∩____∩   /  ●   ● |            | ●   ●  ヽ /      ヽ|   |    ( _●_)  ミ         彡   (_●_ )     | ●   ●  ヽ  彡、   |∪|  、`\        /     |∪|    彡  (_●_)    | / __  ヽノ /´>  )      (  <   ヽ ノ   /    |∪|    ミ (___)   / (_/         \_ )      (  <   ヽ ノ     ヽ
/ ̄ ̄ ̄ ̄ ̄\ |  マイヤヒー♪ |           / ̄ ̄ ̄ ̄ ̄\ \___   __/          |  マイヤフー♪ | / ̄ ̄ ̄ ̄ ̄\      ∨               \___   __/ |  マイヤホー♪ |                            ∨       \__   ____/    ∩___∩              ∩____∩      ∨    | ノ     ヽ            /      ヽ|  ∩____∩   /  ●   ● |            | ●   ●  ヽ /      ヽ|   |    ( _●_)  ミ         彡   (_●_ )     | ●   ●  ヽ  彡、   |∪|  、`\        /     |∪|    彡  (_●_)    | / __  ヽノ /´>  )      (  <   ヽ ノ   /    |∪|    ミ (___)   / (_/         \_ )      (  <   ヽ ノ     ヽ

/ ̄ ̄ ̄ ̄ ̄\ |  マイヤヒー♪ |           / ̄ ̄ ̄ ̄ ̄\ \___   __/          |  マイヤフー♪ | / ̄ ̄ ̄ ̄ ̄\      ∨               \___   __/ |  マイヤホー♪ |                            ∨       \__   ____/    ∩___∩              ∩____∩      ∨    | ノ     ヽ            /      ヽ|  ∩____∩   /  ●   ● |            | ●   ●  ヽ /      ヽ|   |    ( _●_)  ミ         彡   (_●_ )     | ●   ●  ヽ  彡、   |∪|  、`\        /     |∪|    彡  (_●_)    | / __  ヽノ /´>  )      (  <   ヽ ノ   /    |∪|    ミ (___)   / (_/         \_ )      (  <   ヽ ノ     ヽ
/ ̄ ̄ ̄ ̄ ̄\ |  マイヤヒー♪ |           / ̄ ̄ ̄ ̄ ̄\ \___   __/          |  マイヤフー♪ | / ̄ ̄ ̄ ̄ ̄\      ∨               \___   __/ |  マイヤホー♪ |                            ∨       \__   ____/    ∩___∩              ∩____∩      ∨    | ノ     ヽ            /      ヽ|  ∩____∩   /  ●   ● |            | ●   ●  ヽ /      ヽ|   |    ( _●_)  ミ         彡   (_●_ )     | ●   ●  ヽ  彡、   |∪|  、`\        /     |∪|    彡  (_●_)    | / __  ヽノ /´>  )      (  <   ヽ ノ   /    |∪|    ミ (___)   / (_/         \_ )      (  <   ヽ ノ     ヽ
/ ̄ ̄ ̄ ̄ ̄\ |  マイヤヒー♪ |           / ̄ ̄ ̄ ̄ ̄\ \___   __/          |  マイヤフー♪ | / ̄ ̄ ̄ ̄ ̄\      ∨               \___   __/ |  マイヤホー♪ |                            ∨       \__   ____/    ∩___∩              ∩____∩      ∨    | ノ     ヽ            /      ヽ|  ∩____∩   /  ●   ● |            | ●   ●  ヽ /      ヽ|   |    ( _●_)  ミ         彡   (_●_ )     | ●   ●  ヽ  彡、   |∪|  、`\        /     |∪|    彡  (_●_)    | / __  ヽノ /´>  )      (  <   ヽ ノ   /    |∪|    ミ (___)   / (_/         \_ )      (  <   ヽ ノ     ヽ
/ ̄ ̄ ̄ ̄ ̄\ |  マイヤヒー♪ |           / ̄ ̄ ̄ ̄ ̄\ \___   __/          |  マイヤフー♪ | / ̄ ̄ ̄ ̄ ̄\      ∨               \___   __/ |  マイヤホー♪ |                            ∨       \__   ____/    ∩___∩              ∩____∩      ∨    | ノ     ヽ            /      ヽ|  ∩____∩   /  ●   ● |            | ●   ●  ヽ /      ヽ|   |    ( _●_)  ミ         彡   (_●_ )     | ●   ●  ヽ  彡、   |∪|  、`\        /     |∪|    彡  (_●_)    | / __  ヽノ /´>  )      (  <   ヽ ノ   /    |∪|    ミ (___)   / (_/         \_ )      (  <   ヽ ノ     ヽ

備考

最終更新日:2011.6.25

AA表示用CSS - font-familyMona を追加

AA表示用CSS - IE互換モード用pre要素での設定を追記

あう、Times New RomanSerif でした。(汗)

div.kuma - margin: 3% auto 3% auto; に修正。(左右センタリング)

IE比較、UTF-8版追加。

IE の ClearType、IE8 について追記。フォント画像更新。

IE の ClearType、有効・無効の画像追加。

Takaoフォントを追記。

Miguフォントを追加

Operaについては、2番目が無視されるのではなく、英語版などで日本語フォント名が認識できない時など、Sans-Serif に指定しないと使えないのかもしれなません。

メイリオは綺麗だけど、なんか結構クセ者の悪寒(何)

文才なくて悪かったなぁー!(← 不貞腐れ小学生モード)

ダウンロード・リンク

まだまだ調べないといけないことがいっぱいありそうだなぁ...orz