鴨のいいカモです

ここでアヒルの話題は出てきません。予めご了承下さい。

OSXのChrome/Safariにて、全角幅=2半角幅で等幅表示するためのCSS

Qiitaにも投稿したのですが簡単な内容なのでこちらにも。

OSXのChromeにて、pre要素のfont-familyにmonospaceを指定したのですが、全角と半角それぞれは等幅になっているものの、いわゆる全角文字が半角2つ分で表示されていませんでした。あれれと、以前はそうなっていたのにと色々試していたところ、font-sizeが関係していました。

等幅で全角文字=半角2つ分となる条件

font-familyで等幅フォントを指定し、かつfont-sizeはpxかemで指定しつつ、以下の条件を満たしていればOKのようでした。

  • pxで指定する場合は、偶数であること
  • emで指定する場合は、自然数であること

CSSの例

例えばこんな感じで。

font-family: Osaka-mono, "Osaka-等幅", "MS ゴシック", monospace;
font-size: 14px;

ちなみにCourier NewやCourierは全角文字=半角2つ分となりませんのでご注意を。