如何使全角字符恰好是单角字符的两倍？

Question

In terminal, many fonts supporting double-width chars display them exactly twice the width of single-width chars. For example, these two lines should have exactly the same width:

あああ
aaaaaa

However, this is not true in browsers, no matter Chrome, Firefox, or whatever GUI browser. I tried some monospace fonts, but they still don't necessarily display あ exactly twice width of a .

My question is: Can we fix this problem using CSS, or there are fonts satisfying this condition without any help from CSS, or this problem is simply not solvable?

Answer 1

Your problem is fonts. Most monospace fonts don't contain any CJK characters. The browser has to substitute in another font for those characters, and that font will usually have different metrics from the monospace font.

If you're on a Mac, the Osaka-Mono font contains both Japanese and monospaced Latin characters, and the example below will be laid out with exactly two Latin characters to each Japanese character:

 body { font-family: Osaka-Mono; } 

 abcdefghijklmn <br>いろはにほへと 

On other platforms… you're on your own, sorry. CJK web fonts aren't standardized in the same sort of way as Latin web fonts.