ページ

2012/12/26

[CSS]等幅フォントにするためのおすすめのfont-family指定

ゴシック体のオススメのfont-family指定はわかったので、今度はソースコードなどの表示に使えるものを。

使用するフォントはCSS Font Stackでmonospaceで掲載されているものです。
ConsolasはMicrosoftが開発したプログラミング用フォントです。
Courier NewはほとんどのWindows, Macにインストールされているフォントです。

Menlo と Mac の等幅フォント – terkel.jp
Courier、Courier New、Consolas – terkel.jp
上記のページを参考に設定するなら以下のようになるかと思います。
pre, code, var, samp, kbd, .mono {
    font-family: Consolas, 'Courier New', Courier, Monaco, monospace;
    font-size: 14px;
    line-height: 1.2;
}
見慣れない要素名があるので解説をします。詳しくはリンク先の仕様を読んでください。
code: コンピュータのコードを表示するためのタグです。
var: 変数のインスタンスやプログラムの引数を表すためのタグです。
samp: プログラムやスクリプトからの出力のサンプルを表すためのタグです。
kbd: ユーザーが入力するテキストを示すためのタグです。