6

我有一个textarea包含英文和中文文本的网络应用程序。问题是，我无法使用标准等宽字体（Courier New 或 Lucida Console）完美排列字母和字符：中文文本的宽度似乎是英文文本的两倍，但不是 2x，而是 1.8 左右x，至少在 Windows 操作系统中，在我的情况下看起来很难看，尤其是在文本很长的情况下。

<textarea style="font-family:monospace;">      |
中文字|
123456|
Englis|</textarea>

有没有一种简单的方法可以使用 CSS 使汉字看起来比英文字母宽 2 倍？

4

2 回答 2

2

您可以使用Mircosoft Windows预装的“细明体”（英文名：MingLiU），广泛用于繁体中文世界。

见维基解释（只有中文）：

https://zh.wikipedia.org/wiki/%E6%96%B0%E7%B4%B0%E6%98%8E%E9%AB%94?oldformat=true

在此处输入图像描述

<textarea style="font-family:MingLiU;">      |
中文字|
123456|
Englis|</textarea>

还有另一种中文等宽字体，如Sarasa Gothic（更纱黑体）和Noto Sans Mono CJK（思源黑体）。这些是开源的，可以自由用于任何目的。

<textarea style="font-family:Sarasa Mono TC;">      |
中文字|
123456|
Englis|</textarea>

<textarea style="font-family:Noto Sans Mono CJK TC;">      |
中文字|
123456|
Englis|</textarea>

于 2021-03-17T04:04:10.947 回答
2

In your case, the monospace font did not support Chinese characters, and therefore an (undesirable) fallback Chinese font is used that did not "cooperate" with your English letters in monospace font.

Also, you cannot change the glyph width of the font to any desired width using CSS though font-stretch exists. Adjusting size or width works, but it affects both Chinese and English text, and width are based on the width of spaces.

Unfortunately, there are no easy way. Your best bet is to use a font such that it is monospace, and that it supports Chinese characters, and that Chinese characters are twice as wide as English letters.

于 2018-05-19T05:19:19.530 回答