しらいとブログ

ネットで検索してもなかなか出てこないIT情報を独自にまとめています

font-family: monospace;だと文字が小さくなる

ChromeSafariなどWebkit系のブラウザでは可変幅フォントと等幅フォント(monospace)のデフォルトのフォントサイズが違います。インストール時の初期設定では可変幅フォントが16px、等幅フォントが13pxになっており、等幅フォントのサイズはユーザーが簡単には変えられないようになっています。そのためfont-size%指定やem指定している場合、Webkit系のブラウザだけ等幅フォントが小さく表示されてしまいます。ちなみに、Firefox系では初期設定はどちらも16pxになっていますが、ユーザーが別々に変えることが出来るので同じとは限りません。

等幅フォントも可変幅フォントと同じサイズで表示したい時は次のように指定します。

font-family: monospace, serif;

これはmonospaceフォントで表示できない文字はserifフォントで表示するという意味ですが、そうなることは稀です。そして、このように等幅フォントと可変幅フォントを混在させた場合、可変幅フォントのデフォルトサイズが優先されます。(つまり可変幅フォントならserif以外でも良いです。単純に一番短いserifを選んだだけなので。)

サンプル

font-family: serif;を指定した文章

font-family: monospace;を指定した文章

font-family: monospace, serif;を指定した文章

次のようにデフォルトでmonospace指定されている要素全てに設定しておくのもアリだと思います。

tt, code, kbd, samp, pre, xmp, plaintext, listing {
    font-family: monospace, serif;
}