CSS

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

More than 5 years have passed since last update.

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つ分となりませんのでご注意を。