如何为CSS排列等宽字体的英文和中文字符？

Question

我有一个网页应用，SELECT * FROM `table` WHERE 'hello-i-want-to-rent-my-flat-which-is-in-the-best-district-ealing' LIKE CONCAT('%-',phrase,'-%') OR 'hello-i-want-to-rent-my-flat-which-is-in-the-best-district-ealing' LIKE CONCAT('%-',tags,'-%') 包含英文和中文文字。问题是，我不能完全用标准的等宽字体（Courier New或Lucida Console）排列字母和字符：看起来中文文本的宽度几乎是英文文本的两倍，但它不是2x，而是1.8左右x，至少在Windows操作系统中，在我的情况下看起来很难看，特别是如果文本很长。

textarea

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

Answer 1

在你的情况下，monospace字体不支持中文字符，因此使用了一个（不合需要的）后备中文字体，它没有＆＃34;合作＆＃34;用monospace字体的英文字母。

此外，尽管存在font-stretch，但您无法使用CSS将字体的字形宽度更改为任何所需的宽度。调整大小或宽度有效，但它会影响中文和英文文本，宽度基于空格的宽度。

不幸的是，没有简单方法。你最好的选择是使用一种等宽字体，它支持中文字符，汉字是英文字母的两倍。

Answer 2

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

见wiki说明（只有中文）：

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 (思源黑体)。这些都是开源的，可以免费用于任何目的。