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

2021.4.1 移転しました...

• このページの旧URLは
  • http://www10.plala.or.jp/palm84/css_memo_font_utf8.html

• Shit_JIS 版
• UTF-8 版　　← 今ここ

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

目次

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

無指定が安全（？）

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

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

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

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

ここがミソなり

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

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

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

無指定

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

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

プロポーショナル（ゴシック系）

一般名（種類名）で指定

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

font-family: sans-serif;

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

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

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

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

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

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

あう、Times New Roman は Serif でした。（汗）

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

表示テスト

• 無指定

あいうえお aiueo AIUEO iI lL qQ Windows

• font-family:sans-serif

あいうえお aiueo AIUEO iI lL qQ Windows

• font-family:Arial,sans-serif

あいうえお aiueo AIUEO iI lL qQ Windows

• font-family:Arial,'MS PGothic','ＭＳ Ｐゴシック',sans-serif

あいうえお aiueo AIUEO iI lL qQ Windows

• font-family:'VL Pゴシック','VL PGothic',sans-serif

あいうえお aiueo AIUEO iI lL qQ Windows

• font-family:'メイリオ',meiryo,sans-serif

あいうえお aiueo AIUEO iI lL qQ Windows

• font-family:'IPAMonaPGothic','IPA モナー Pゴシック',Mona,sans-serif

あいうえお aiueo AIUEO iI lL qQ Windows

• font-family:'M+2P+IPAG',sans-serif

あいうえお aiueo AIUEO iI lL qQ Windows

• font-family:'VL PGothic','VL Pゴシック',Arial,sans-serif

あいうえお aiueo AIUEO iI lL qQ Windows

• font-family:'VL Pゴシック','VL PGothic',Arial,'ＭＳ Ｐゴシック',sans-serif

あいうえお aiueo AIUEO iI lL qQ Windows

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

等幅フォント

一般名（種類名）で指定

font-family: monospace;

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

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

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

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

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

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

IE比較

IEはややこしいです。

IE の ClearType

• ClearType - Wikipedia
• メイリオ - Wikipedia

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

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

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

• IEでのみ有効にするには、
  • 設定は【インターネット オプション】→[詳細設定]→「HTML で常に ClearType を使用する」
• OS全体に設定
  • XP：コントロール パネル→【画面】→[デザイン]→[効果]→「次の方法でスクリーン フォントの縁を滑らかにする」
  • 7：コントロール パネル→【個人設定】→【ディスプレイ】→「ClearType テキストの設定」

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

• ClearType 有効

• ClearType 無効（※ 効果「標準」）

• ClearType 有効 + gdi++.dll

• 参考拙作
  • メイリオとブラウザのフォントのあれやこれや
  • gdi++.dll でフォントをきれいに表示

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

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

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

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

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

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

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

AA表示

【追記】font-family に Mona を追加。

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

font-family: 'ＭＳ Ｐゴシック',Monapo,'IPA モナー Pゴシック',IPAMonaPGothic,Mona,sans-serif;

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

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

AA用CSS

• アスキーアート - Wikipedia

スタイルシート

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: 'ＭＳ Ｐゴシック',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は下記の記述でおｋクマー。改行<br>タグは不要です。

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

</div>

IEの互換モードではpre要素で

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

pre.kuma2 {
margin: 3% 5% 3% 5%;
padding: 0.5em;
font-family: 'ＭＳ Ｐゴシック',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でも指定が必要ですね。

• 無指定

／￣￣￣￣￣＼ |　 マイヤヒー♪ |　　　　　　 　 　 ／￣￣￣￣￣＼ ＼＿＿_ 　 ＿_／　　　　　　　　　 |　 マイヤフー♪ |　／￣￣￣￣￣＼ 　　　　　∨　　　　　　　　　　 　 　 ＼＿＿_ 　 ＿_／　|　 マイヤホー♪ | 　　　　　　　　　　　　　　　　　　　　 　 　 　 ∨ 　 　 　 ＼＿_ 　 ＿＿__／ 　　 ∩＿＿＿∩ 　　　　　　　　　　　　 ∩＿＿＿_∩　 　 　 ∨ 　　 | ノ　　　　　ヽ 　　　　　　　　　　　/　　　　　　ヽ|　　∩＿＿＿_∩ 　　/　 ●　　　● |　 　　　　　　　　　 | ●　　　●　 ヽ / 　　　　　ヽ| 　 |　　　　( _●_)　 ミ　　　　　　　　 彡 　 (_●_ ) 　 　 | ●　　　●　 ヽ 　彡､　　　|∪|　　､｀＼　　　　　 　 ／ 　 　 |∪| 　　 彡　 (_●_)　　　 | /　＿＿　 ヽノ　/´>　 )　　　　　　（　 <　　 ヽ ﾉ 　 ／ 　　 |∪|　　　　ミ (＿＿＿）　　　/　(_／　　　　 　 　 ＼_ )　　　　 　（ 　< 　 ヽ ﾉ　　　　 ヽ

• font-family:Sans-Serif

／￣￣￣￣￣＼ |　 マイヤヒー♪ |　　　　　　 　 　 ／￣￣￣￣￣＼ ＼＿＿_ 　 ＿_／　　　　　　　　　 |　 マイヤフー♪ |　／￣￣￣￣￣＼ 　　　　　∨　　　　　　　　　　 　 　 ＼＿＿_ 　 ＿_／　|　 マイヤホー♪ | 　　　　　　　　　　　　　　　　　　　　 　 　 　 ∨ 　 　 　 ＼＿_ 　 ＿＿__／ 　　 ∩＿＿＿∩ 　　　　　　　　　　　　 ∩＿＿＿_∩　 　 　 ∨ 　　 | ノ　　　　　ヽ 　　　　　　　　　　　/　　　　　　ヽ|　　∩＿＿＿_∩ 　　/　 ●　　　● |　 　　　　　　　　　 | ●　　　●　 ヽ / 　　　　　ヽ| 　 |　　　　( _●_)　 ミ　　　　　　　　 彡 　 (_●_ ) 　 　 | ●　　　●　 ヽ 　彡､　　　|∪|　　､｀＼　　　　　 　 ／ 　 　 |∪| 　　 彡　 (_●_)　　　 | /　＿＿　 ヽノ　/´>　 )　　　　　　（　 <　　 ヽ ﾉ 　 ／ 　　 |∪|　　　　ミ (＿＿＿）　　　/　(_／　　　　 　 　 ＼_ )　　　　 　（ 　< 　 ヽ ﾉ　　　　 ヽ

• font-family:'ＭＳ Ｐゴシック',Sans-Serif

／￣￣￣￣￣＼ |　 マイヤヒー♪ |　　　　　　 　 　 ／￣￣￣￣￣＼ ＼＿＿_ 　 ＿_／　　　　　　　　　 |　 マイヤフー♪ |　／￣￣￣￣￣＼ 　　　　　∨　　　　　　　　　　 　 　 ＼＿＿_ 　 ＿_／　|　 マイヤホー♪ | 　　　　　　　　　　　　　　　　　　　　 　 　 　 ∨ 　 　 　 ＼＿_ 　 ＿＿__／ 　　 ∩＿＿＿∩ 　　　　　　　　　　　　 ∩＿＿＿_∩　 　 　 ∨ 　　 | ノ　　　　　ヽ 　　　　　　　　　　　/　　　　　　ヽ|　　∩＿＿＿_∩ 　　/　 ●　　　● |　 　　　　　　　　　 | ●　　　●　 ヽ / 　　　　　ヽ| 　 |　　　　( _●_)　 ミ　　　　　　　　 彡 　 (_●_ ) 　 　 | ●　　　●　 ヽ 　彡､　　　|∪|　　､｀＼　　　　　 　 ／ 　 　 |∪| 　　 彡　 (_●_)　　　 | /　＿＿　 ヽノ　/´>　 )　　　　　　（　 <　　 ヽ ﾉ 　 ／ 　　 |∪|　　　　ミ (＿＿＿）　　　/　(_／　　　　 　 　 ＼_ )　　　　 　（ 　< 　 ヽ ﾉ　　　　 ヽ

• font-family:'メイリオ',Sans-Serif;

／￣￣￣￣￣＼ |　 マイヤヒー♪ |　　　　　　 　 　 ／￣￣￣￣￣＼ ＼＿＿_ 　 ＿_／　　　　　　　　　 |　 マイヤフー♪ |　／￣￣￣￣￣＼ 　　　　　∨　　　　　　　　　　 　 　 ＼＿＿_ 　 ＿_／　|　 マイヤホー♪ | 　　　　　　　　　　　　　　　　　　　　 　 　 　 ∨ 　 　 　 ＼＿_ 　 ＿＿__／ 　　 ∩＿＿＿∩ 　　　　　　　　　　　　 ∩＿＿＿_∩　 　 　 ∨ 　　 | ノ　　　　　ヽ 　　　　　　　　　　　/　　　　　　ヽ|　　∩＿＿＿_∩ 　　/　 ●　　　● |　 　　　　　　　　　 | ●　　　●　 ヽ / 　　　　　ヽ| 　 |　　　　( _●_)　 ミ　　　　　　　　 彡 　 (_●_ ) 　 　 | ●　　　●　 ヽ 　彡､　　　|∪|　　､｀＼　　　　　 　 ／ 　 　 |∪| 　　 彡　 (_●_)　　　 | /　＿＿　 ヽノ　/´>　 )　　　　　　（　 <　　 ヽ ﾉ 　 ／ 　　 |∪|　　　　ミ (＿＿＿）　　　/　(_／　　　　 　 　 ＼_ )　　　　 　（ 　< 　 ヽ ﾉ　　　　 ヽ

---

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

• font-family:'ＭＳ Ｐゴシック','IPA モナー Pゴシック',Sans-Serif

／￣￣￣￣￣＼ |　 マイヤヒー♪ |　　　　　　 　 　 ／￣￣￣￣￣＼ ＼＿＿_ 　 ＿_／　　　　　　　　　 |　 マイヤフー♪ |　／￣￣￣￣￣＼ 　　　　　∨　　　　　　　　　　 　 　 ＼＿＿_ 　 ＿_／　|　 マイヤホー♪ | 　　　　　　　　　　　　　　　　　　　　 　 　 　 ∨ 　 　 　 ＼＿_ 　 ＿＿__／ 　　 ∩＿＿＿∩ 　　　　　　　　　　　　 ∩＿＿＿_∩　 　 　 ∨ 　　 | ノ　　　　　ヽ 　　　　　　　　　　　/　　　　　　ヽ|　　∩＿＿＿_∩ 　　/　 ●　　　● |　 　　　　　　　　　 | ●　　　●　 ヽ / 　　　　　ヽ| 　 |　　　　( _●_)　 ミ　　　　　　　　 彡 　 (_●_ ) 　 　 | ●　　　●　 ヽ 　彡､　　　|∪|　　､｀＼　　　　　 　 ／ 　 　 |∪| 　　 彡　 (_●_)　　　 | /　＿＿　 ヽノ　/´>　 )　　　　　　（　 <　　 ヽ ﾉ 　 ／ 　　 |∪|　　　　ミ (＿＿＿）　　　/　(_／　　　　 　 　 ＼_ )　　　　 　（ 　< 　 ヽ ﾉ　　　　 ヽ

• font-family:'ＭＳ Ｐゴシック','IPAMonaPGothic',Sans-Serif

／￣￣￣￣￣＼ |　 マイヤヒー♪ |　　　　　　 　 　 ／￣￣￣￣￣＼ ＼＿＿_ 　 ＿_／　　　　　　　　　 |　 マイヤフー♪ |　／￣￣￣￣￣＼ 　　　　　∨　　　　　　　　　　 　 　 ＼＿＿_ 　 ＿_／　|　 マイヤホー♪ | 　　　　　　　　　　　　　　　　　　　　 　 　 　 ∨ 　 　 　 ＼＿_ 　 ＿＿__／ 　　 ∩＿＿＿∩ 　　　　　　　　　　　　 ∩＿＿＿_∩　 　 　 ∨ 　　 | ノ　　　　　ヽ 　　　　　　　　　　　/　　　　　　ヽ|　　∩＿＿＿_∩ 　　/　 ●　　　● |　 　　　　　　　　　 | ●　　　●　 ヽ / 　　　　　ヽ| 　 |　　　　( _●_)　 ミ　　　　　　　　 彡 　 (_●_ ) 　 　 | ●　　　●　 ヽ 　彡､　　　|∪|　　､｀＼　　　　　 　 ／ 　 　 |∪| 　　 彡　 (_●_)　　　 | /　＿＿　 ヽノ　/´>　 )　　　　　　（　 <　　 ヽ ﾉ 　 ／ 　　 |∪|　　　　ミ (＿＿＿）　　　/　(_／　　　　 　 　 ＼_ )　　　　 　（ 　< 　 ヽ ﾉ　　　　 ヽ

• font-family:'ＭＳ Ｐゴシック',Mona,Sans-Serif

／￣￣￣￣￣＼ |　 マイヤヒー♪ |　　　　　　 　 　 ／￣￣￣￣￣＼ ＼＿＿_ 　 ＿_／　　　　　　　　　 |　 マイヤフー♪ |　／￣￣￣￣￣＼ 　　　　　∨　　　　　　　　　　 　 　 ＼＿＿_ 　 ＿_／　|　 マイヤホー♪ | 　　　　　　　　　　　　　　　　　　　　 　 　 　 ∨ 　 　 　 ＼＿_ 　 ＿＿__／ 　　 ∩＿＿＿∩ 　　　　　　　　　　　　 ∩＿＿＿_∩　 　 　 ∨ 　　 | ノ　　　　　ヽ 　　　　　　　　　　　/　　　　　　ヽ|　　∩＿＿＿_∩ 　　/　 ●　　　● |　 　　　　　　　　　 | ●　　　●　 ヽ / 　　　　　ヽ| 　 |　　　　( _●_)　 ミ　　　　　　　　 彡 　 (_●_ ) 　 　 | ●　　　●　 ヽ 　彡､　　　|∪|　　､｀＼　　　　　 　 ／ 　 　 |∪| 　　 彡　 (_●_)　　　 | /　＿＿　 ヽノ　/´>　 )　　　　　　（　 <　　 ヽ ﾉ 　 ／ 　　 |∪|　　　　ミ (＿＿＿）　　　/　(_／　　　　 　 　 ＼_ )　　　　 　（ 　< 　 ヽ ﾉ　　　　 ヽ

---

• font-family:'IPA モナー Pゴシック','ＭＳ Ｐゴシック',Sans-Serif

／￣￣￣￣￣＼ |　 マイヤヒー♪ |　　　　　　 　 　 ／￣￣￣￣￣＼ ＼＿＿_ 　 ＿_／　　　　　　　　　 |　 マイヤフー♪ |　／￣￣￣￣￣＼ 　　　　　∨　　　　　　　　　　 　 　 ＼＿＿_ 　 ＿_／　|　 マイヤホー♪ | 　　　　　　　　　　　　　　　　　　　　 　 　 　 ∨ 　 　 　 ＼＿_ 　 ＿＿__／ 　　 ∩＿＿＿∩ 　　　　　　　　　　　　 ∩＿＿＿_∩　 　 　 ∨ 　　 | ノ　　　　　ヽ 　　　　　　　　　　　/　　　　　　ヽ|　　∩＿＿＿_∩ 　　/　 ●　　　● |　 　　　　　　　　　 | ●　　　●　 ヽ / 　　　　　ヽ| 　 |　　　　( _●_)　 ミ　　　　　　　　 彡 　 (_●_ ) 　 　 | ●　　　●　 ヽ 　彡､　　　|∪|　　､｀＼　　　　　 　 ／ 　 　 |∪| 　　 彡　 (_●_)　　　 | /　＿＿　 ヽノ　/´>　 )　　　　　　（　 <　　 ヽ ﾉ 　 ／ 　　 |∪|　　　　ミ (＿＿＿）　　　/　(_／　　　　 　 　 ＼_ )　　　　 　（ 　< 　 ヽ ﾉ　　　　 ヽ

• font-family:'IPAMonaPGothic','ＭＳ Ｐゴシック',Sans-Serif

／￣￣￣￣￣＼ |　 マイヤヒー♪ |　　　　　　 　 　 ／￣￣￣￣￣＼ ＼＿＿_ 　 ＿_／　　　　　　　　　 |　 マイヤフー♪ |　／￣￣￣￣￣＼ 　　　　　∨　　　　　　　　　　 　 　 ＼＿＿_ 　 ＿_／　|　 マイヤホー♪ | 　　　　　　　　　　　　　　　　　　　　 　 　 　 ∨ 　 　 　 ＼＿_ 　 ＿＿__／ 　　 ∩＿＿＿∩ 　　　　　　　　　　　　 ∩＿＿＿_∩　 　 　 ∨ 　　 | ノ　　　　　ヽ 　　　　　　　　　　　/　　　　　　ヽ|　　∩＿＿＿_∩ 　　/　 ●　　　● |　 　　　　　　　　　 | ●　　　●　 ヽ / 　　　　　ヽ| 　 |　　　　( _●_)　 ミ　　　　　　　　 彡 　 (_●_ ) 　 　 | ●　　　●　 ヽ 　彡､　　　|∪|　　､｀＼　　　　　 　 ／ 　 　 |∪| 　　 彡　 (_●_)　　　 | /　＿＿　 ヽノ　/´>　 )　　　　　　（　 <　　 ヽ ﾉ 　 ／ 　　 |∪|　　　　ミ (＿＿＿）　　　/　(_／　　　　 　 　 ＼_ )　　　　 　（ 　< 　 ヽ ﾉ　　　　 ヽ

• font-family: Mona,'ＭＳ Ｐゴシック',Sans-Serif

／￣￣￣￣￣＼ |　 マイヤヒー♪ |　　　　　　 　 　 ／￣￣￣￣￣＼ ＼＿＿_ 　 ＿_／　　　　　　　　　 |　 マイヤフー♪ |　／￣￣￣￣￣＼ 　　　　　∨　　　　　　　　　　 　 　 ＼＿＿_ 　 ＿_／　|　 マイヤホー♪ | 　　　　　　　　　　　　　　　　　　　　 　 　 　 ∨ 　 　 　 ＼＿_ 　 ＿＿__／ 　　 ∩＿＿＿∩ 　　　　　　　　　　　　 ∩＿＿＿_∩　 　 　 ∨ 　　 | ノ　　　　　ヽ 　　　　　　　　　　　/　　　　　　ヽ|　　∩＿＿＿_∩ 　　/　 ●　　　● |　 　　　　　　　　　 | ●　　　●　 ヽ / 　　　　　ヽ| 　 |　　　　( _●_)　 ミ　　　　　　　　 彡 　 (_●_ ) 　 　 | ●　　　●　 ヽ 　彡､　　　|∪|　　､｀＼　　　　　 　 ／ 　 　 |∪| 　　 彡　 (_●_)　　　 | /　＿＿　 ヽノ　/´>　 )　　　　　　（　 <　　 ヽ ﾉ 　 ／ 　　 |∪|　　　　ミ (＿＿＿）　　　/　(_／　　　　 　 　 ＼_ )　　　　 　（ 　< 　 ヽ ﾉ　　　　 ヽ

---

• font-family:'ＭＳ Ｐゴシック','IPA モナー Pゴシック'

／￣￣￣￣￣＼ |　 マイヤヒー♪ |　　　　　　 　 　 ／￣￣￣￣￣＼ ＼＿＿_ 　 ＿_／　　　　　　　　　 |　 マイヤフー♪ |　／￣￣￣￣￣＼ 　　　　　∨　　　　　　　　　　 　 　 ＼＿＿_ 　 ＿_／　|　 マイヤホー♪ | 　　　　　　　　　　　　　　　　　　　　 　 　 　 ∨ 　 　 　 ＼＿_ 　 ＿＿__／ 　　 ∩＿＿＿∩ 　　　　　　　　　　　　 ∩＿＿＿_∩　 　 　 ∨ 　　 | ノ　　　　　ヽ 　　　　　　　　　　　/　　　　　　ヽ|　　∩＿＿＿_∩ 　　/　 ●　　　● |　 　　　　　　　　　 | ●　　　●　 ヽ / 　　　　　ヽ| 　 |　　　　( _●_)　 ミ　　　　　　　　 彡 　 (_●_ ) 　 　 | ●　　　●　 ヽ 　彡､　　　|∪|　　､｀＼　　　　　 　 ／ 　 　 |∪| 　　 彡　 (_●_)　　　 | /　＿＿　 ヽノ　/´>　 )　　　　　　（　 <　　 ヽ ﾉ 　 ／ 　　 |∪|　　　　ミ (＿＿＿）　　　/　(_／　　　　 　 　 ＼_ )　　　　 　（ 　< 　 ヽ ﾉ　　　　 ヽ

• font-family:'ＭＳ Ｐゴシック','IPAMonaPGothic'

／￣￣￣￣￣＼ |　 マイヤヒー♪ |　　　　　　 　 　 ／￣￣￣￣￣＼ ＼＿＿_ 　 ＿_／　　　　　　　　　 |　 マイヤフー♪ |　／￣￣￣￣￣＼ 　　　　　∨　　　　　　　　　　 　 　 ＼＿＿_ 　 ＿_／　|　 マイヤホー♪ | 　　　　　　　　　　　　　　　　　　　　 　 　 　 ∨ 　 　 　 ＼＿_ 　 ＿＿__／ 　　 ∩＿＿＿∩ 　　　　　　　　　　　　 ∩＿＿＿_∩　 　 　 ∨ 　　 | ノ　　　　　ヽ 　　　　　　　　　　　/　　　　　　ヽ|　　∩＿＿＿_∩ 　　/　 ●　　　● |　 　　　　　　　　　 | ●　　　●　 ヽ / 　　　　　ヽ| 　 |　　　　( _●_)　 ミ　　　　　　　　 彡 　 (_●_ ) 　 　 | ●　　　●　 ヽ 　彡､　　　|∪|　　､｀＼　　　　　 　 ／ 　 　 |∪| 　　 彡　 (_●_)　　　 | /　＿＿　 ヽノ　/´>　 )　　　　　　（　 <　　 ヽ ﾉ 　 ／ 　　 |∪|　　　　ミ (＿＿＿）　　　/　(_／　　　　 　 　 ＼_ )　　　　 　（ 　< 　 ヽ ﾉ　　　　 ヽ

---

• font-family:'IPA モナー Pゴシック',sans-serif

／￣￣￣￣￣＼ |　 マイヤヒー♪ |　　　　　　 　 　 ／￣￣￣￣￣＼ ＼＿＿_ 　 ＿_／　　　　　　　　　 |　 マイヤフー♪ |　／￣￣￣￣￣＼ 　　　　　∨　　　　　　　　　　 　 　 ＼＿＿_ 　 ＿_／　|　 マイヤホー♪ | 　　　　　　　　　　　　　　　　　　　　 　 　 　 ∨ 　 　 　 ＼＿_ 　 ＿＿__／ 　　 ∩＿＿＿∩ 　　　　　　　　　　　　 ∩＿＿＿_∩　 　 　 ∨ 　　 | ノ　　　　　ヽ 　　　　　　　　　　　/　　　　　　ヽ|　　∩＿＿＿_∩ 　　/　 ●　　　● |　 　　　　　　　　　 | ●　　　●　 ヽ / 　　　　　ヽ| 　 |　　　　( _●_)　 ミ　　　　　　　　 彡 　 (_●_ ) 　 　 | ●　　　●　 ヽ 　彡､　　　|∪|　　､｀＼　　　　　 　 ／ 　 　 |∪| 　　 彡　 (_●_)　　　 | /　＿＿　 ヽノ　/´>　 )　　　　　　（　 <　　 ヽ ﾉ 　 ／ 　　 |∪|　　　　ミ (＿＿＿）　　　/　(_／　　　　 　 　 ＼_ )　　　　 　（ 　< 　 ヽ ﾉ　　　　 ヽ

• font-family:'IPAMonaPGothic',sans-serif

／￣￣￣￣￣＼ |　 マイヤヒー♪ |　　　　　　 　 　 ／￣￣￣￣￣＼ ＼＿＿_ 　 ＿_／　　　　　　　　　 |　 マイヤフー♪ |　／￣￣￣￣￣＼ 　　　　　∨　　　　　　　　　　 　 　 ＼＿＿_ 　 ＿_／　|　 マイヤホー♪ | 　　　　　　　　　　　　　　　　　　　　 　 　 　 ∨ 　 　 　 ＼＿_ 　 ＿＿__／ 　　 ∩＿＿＿∩ 　　　　　　　　　　　　 ∩＿＿＿_∩　 　 　 ∨ 　　 | ノ　　　　　ヽ 　　　　　　　　　　　/　　　　　　ヽ|　　∩＿＿＿_∩ 　　/　 ●　　　● |　 　　　　　　　　　 | ●　　　●　 ヽ / 　　　　　ヽ| 　 |　　　　( _●_)　 ミ　　　　　　　　 彡 　 (_●_ ) 　 　 | ●　　　●　 ヽ 　彡､　　　|∪|　　､｀＼　　　　　 　 ／ 　 　 |∪| 　　 彡　 (_●_)　　　 | /　＿＿　 ヽノ　/´>　 )　　　　　　（　 <　　 ヽ ﾉ 　 ／ 　　 |∪|　　　　ミ (＿＿＿）　　　/　(_／　　　　 　 　 ＼_ )　　　　 　（ 　< 　 ヽ ﾉ　　　　 ヽ

• font-family: Mona,sans-serif

／￣￣￣￣￣＼ |　 マイヤヒー♪ |　　　　　　 　 　 ／￣￣￣￣￣＼ ＼＿＿_ 　 ＿_／　　　　　　　　　 |　 マイヤフー♪ |　／￣￣￣￣￣＼ 　　　　　∨　　　　　　　　　　 　 　 ＼＿＿_ 　 ＿_／　|　 マイヤホー♪ | 　　　　　　　　　　　　　　　　　　　　 　 　 　 ∨ 　 　 　 ＼＿_ 　 ＿＿__／ 　　 ∩＿＿＿∩ 　　　　　　　　　　　　 ∩＿＿＿_∩　 　 　 ∨ 　　 | ノ　　　　　ヽ 　　　　　　　　　　　/　　　　　　ヽ|　　∩＿＿＿_∩ 　　/　 ●　　　● |　 　　　　　　　　　 | ●　　　●　 ヽ / 　　　　　ヽ| 　 |　　　　( _●_)　 ミ　　　　　　　　 彡 　 (_●_ ) 　 　 | ●　　　●　 ヽ 　彡､　　　|∪|　　､｀＼　　　　　 　 ／ 　 　 |∪| 　　 彡　 (_●_)　　　 | /　＿＿　 ヽノ　/´>　 )　　　　　　（　 <　　 ヽ ﾉ 　 ／ 　　 |∪|　　　　ミ (＿＿＿）　　　/　(_／　　　　 　 　 ＼_ )　　　　 　（ 　< 　 ヽ ﾉ　　　　 ヽ

---

• font-family:'IPA モナー Pゴシック'

／￣￣￣￣￣＼ |　 マイヤヒー♪ |　　　　　　 　 　 ／￣￣￣￣￣＼ ＼＿＿_ 　 ＿_／　　　　　　　　　 |　 マイヤフー♪ |　／￣￣￣￣￣＼ 　　　　　∨　　　　　　　　　　 　 　 ＼＿＿_ 　 ＿_／　|　 マイヤホー♪ | 　　　　　　　　　　　　　　　　　　　　 　 　 　 ∨ 　 　 　 ＼＿_ 　 ＿＿__／ 　　 ∩＿＿＿∩ 　　　　　　　　　　　　 ∩＿＿＿_∩　 　 　 ∨ 　　 | ノ　　　　　ヽ 　　　　　　　　　　　/　　　　　　ヽ|　　∩＿＿＿_∩ 　　/　 ●　　　● |　 　　　　　　　　　 | ●　　　●　 ヽ / 　　　　　ヽ| 　 |　　　　( _●_)　 ミ　　　　　　　　 彡 　 (_●_ ) 　 　 | ●　　　●　 ヽ 　彡､　　　|∪|　　､｀＼　　　　　 　 ／ 　 　 |∪| 　　 彡　 (_●_)　　　 | /　＿＿　 ヽノ　/´>　 )　　　　　　（　 <　　 ヽ ﾉ 　 ／ 　　 |∪|　　　　ミ (＿＿＿）　　　/　(_／　　　　 　 　 ＼_ )　　　　 　（ 　< 　 ヽ ﾉ　　　　 ヽ

• font-family:'IPAMonaPGothic'

／￣￣￣￣￣＼ |　 マイヤヒー♪ |　　　　　　 　 　 ／￣￣￣￣￣＼ ＼＿＿_ 　 ＿_／　　　　　　　　　 |　 マイヤフー♪ |　／￣￣￣￣￣＼ 　　　　　∨　　　　　　　　　　 　 　 ＼＿＿_ 　 ＿_／　|　 マイヤホー♪ | 　　　　　　　　　　　　　　　　　　　　 　 　 　 ∨ 　 　 　 ＼＿_ 　 ＿＿__／ 　　 ∩＿＿＿∩ 　　　　　　　　　　　　 ∩＿＿＿_∩　 　 　 ∨ 　　 | ノ　　　　　ヽ 　　　　　　　　　　　/　　　　　　ヽ|　　∩＿＿＿_∩ 　　/　 ●　　　● |　 　　　　　　　　　 | ●　　　●　 ヽ / 　　　　　ヽ| 　 |　　　　( _●_)　 ミ　　　　　　　　 彡 　 (_●_ ) 　 　 | ●　　　●　 ヽ 　彡､　　　|∪|　　､｀＼　　　　　 　 ／ 　 　 |∪| 　　 彡　 (_●_)　　　 | /　＿＿　 ヽノ　/´>　 )　　　　　　（　 <　　 ヽ ﾉ 　 ／ 　　 |∪|　　　　ミ (＿＿＿）　　　/　(_／　　　　 　 　 ＼_ )　　　　 　（ 　< 　 ヽ ﾉ　　　　 ヽ

• font-family: Mona

／￣￣￣￣￣＼ |　 マイヤヒー♪ |　　　　　　 　 　 ／￣￣￣￣￣＼ ＼＿＿_ 　 ＿_／　　　　　　　　　 |　 マイヤフー♪ |　／￣￣￣￣￣＼ 　　　　　∨　　　　　　　　　　 　 　 ＼＿＿_ 　 ＿_／　|　 マイヤホー♪ | 　　　　　　　　　　　　　　　　　　　　 　 　 　 ∨ 　 　 　 ＼＿_ 　 ＿＿__／ 　　 ∩＿＿＿∩ 　　　　　　　　　　　　 ∩＿＿＿_∩　 　 　 ∨ 　　 | ノ　　　　　ヽ 　　　　　　　　　　　/　　　　　　ヽ|　　∩＿＿＿_∩ 　　/　 ●　　　● |　 　　　　　　　　　 | ●　　　●　 ヽ / 　　　　　ヽ| 　 |　　　　( _●_)　 ミ　　　　　　　　 彡 　 (_●_ ) 　 　 | ●　　　●　 ヽ 　彡､　　　|∪|　　､｀＼　　　　　 　 ／ 　 　 |∪| 　　 彡　 (_●_)　　　 | /　＿＿　 ヽノ　/´>　 )　　　　　　（　 <　　 ヽ ﾉ 　 ／ 　　 |∪|　　　　ミ (＿＿＿）　　　/　(_／　　　　 　 　 ＼_ )　　　　 　（ 　< 　 ヽ ﾉ　　　　 ヽ

• font-family: Monapo

／￣￣￣￣￣＼ |　 マイヤヒー♪ |　　　　　　 　 　 ／￣￣￣￣￣＼ ＼＿＿_ 　 ＿_／　　　　　　　　　 |　 マイヤフー♪ |　／￣￣￣￣￣＼ 　　　　　∨　　　　　　　　　　 　 　 ＼＿＿_ 　 ＿_／　|　 マイヤホー♪ | 　　　　　　　　　　　　　　　　　　　　 　 　 　 ∨ 　 　 　 ＼＿_ 　 ＿＿__／ 　　 ∩＿＿＿∩ 　　　　　　　　　　　　 ∩＿＿＿_∩　 　 　 ∨ 　　 | ノ　　　　　ヽ 　　　　　　　　　　　/　　　　　　ヽ|　　∩＿＿＿_∩ 　　/　 ●　　　● |　 　　　　　　　　　 | ●　　　●　 ヽ / 　　　　　ヽ| 　 |　　　　( _●_)　 ミ　　　　　　　　 彡 　 (_●_ ) 　 　 | ●　　　●　 ヽ 　彡､　　　|∪|　　､｀＼　　　　　 　 ／ 　 　 |∪| 　　 彡　 (_●_)　　　 | /　＿＿　 ヽノ　/´>　 )　　　　　　（　 <　　 ヽ ﾉ 　 ／ 　　 |∪|　　　　ミ (＿＿＿）　　　/　(_／　　　　 　 　 ＼_ )　　　　 　（ 　< 　 ヽ ﾉ　　　　 ヽ

備考

最終更新日：2011.6.25

AA表示用CSS - font-family に Mona を追加

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

あう、Times New Roman は Serif でした。（汗）

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

IE比較、UTF-8版追加。

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

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

Takaoフォントを追記。

Miguフォントを追加

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

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

文才なくて悪かったなぁー！（← 不貞腐れ小学生モード）

ダウンロード・リンク

• Windows XP 向け ClearType 対応日本語フォント
  • メイリオ・フォントをWindows XP／Server 2003で利用する（改訂版） － ＠IT
• VLゴシックフォントファミリ
• IPAモナーフォント
• Mona Font, a Japanese font for text arts | Get Mona Font, a Japanese font for text arts at SourceForge.net
• M+ と IPAフォントの合成フォント : フォント一覧
• Bitstream Vera Fonts README
• Takao Fonts in Launchpad
• efont プロジェクト日本語トップページ - SourceForge.JP（さざなみフォント）
• Miguフォント : M+とIPAの合成フォント

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

• ←
• H
• ↑
• ↓