コードを記述や整形テキストなどなど等幅フォントの方が見やすいとケースもあると思います。当ブログでもコード部分に等幅フォントを使用しています。今回はスタイルシートで設定する等幅フォントの事を書いてみたいと思います。

まずは等幅フォントとはどういうモノなのかを見ていきます。

等幅フォントの形

monospace_001

上は等幅フォントで「MS ゴシック体」のサンプルです。下はプロポーショナルフォント「MS Pゴシック体」のサンプルです。
等幅フォントは文字の幅が一定になるのが特徴になります。

日本語の等幅フォント

等幅の日本語フォントというとWindowsでは「MS ゴシック」や「MS 明朝」がMacintoshではOsaka−等幅がありますね。

スタイルシートでは以下のように記述できます。

.test_mono_1 { font-family:"Osaka−等幅","MS ゴシック","monospace"; } /* ゴシック体 */
.test_mono_2 { font-family:"MS 明朝","monospace"; } /* 明朝体 */

*MacintoshOSX以降で等幅の明朝体が見あたらないため記述していません。ご存じの方がいればご一報いただければと思います。

英字の等幅フォント

Google web fontにいくつか等幅フォントがあります。3個のフォントのサンプルを掲載してみます
Anonymous Pro Google web font [Anonymous Pro]

ABCDEFGHIJKLMNOPQRSTUWXZY
abcdefghijklmnopqrstuwxzy
0123456789

Inconsolata Google web font [Inconsolata]

ABCDEFGHIJKLMNOPQRSTUWXZY
abcdefghijklmnopqrstuwxzy
0123456789

Lekton Google web font [Lekton]

ABCDEFGHIJKLMNOPQRSTUWXZY
abcdefghijklmnopqrstuwxzy
0123456789