YOUR-ELEMENT { font-family: "Courier New", Courier, sans-serif; }

CSSで等幅フォントを指定すると一部のブラウザが文字を小さめにレンダリングしてしまうのを防ぐ方法をご紹介します。

通常は下のようにお尻に"monospace"と書きますが、これを"sans-serif"にするだけです^[1]。

YOUR-ELEMENT { font-family: "Courier New", Courier, monospace; }

"Courier New"や"Courier"はかなり昔のコンピュータにもインストールされているので、"sans-serif"の記述に関わらず、実際には等幅フォントが当たり、かつ文字が小さくなる問題も解消することができます。

等幅フォントの追加はお好みで。当サイトでは先頭に"Menlo"を追加しています。

code { font-family: Menlo, "Courier New", Courier, sans-serif; }

1. 原理的には間違った記述ですが、現実的には問題解決していますので、後はご判断ください…。