Как я могу выровнять английские и китайские символы моноширинного шрифта для CSS?

У меня есть веб-приложение с textarea, содержащим текст на английском и китайском языках. Проблема в том, что я не могу идеально выровнять буквы и символы со стандартными моноширинными шрифтами (Courier New или Lucida Console): кажется, что китайский текст имеет ширину почти вдвое больше, чем английский текст, но это не в 2 раза, а примерно в 1,8 раза. x, по крайней мере, в ОС Windows, что в моем случае выглядит некрасиво, особенно если текст длинный.

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

Есть ли простой способ заставить китайские иероглифы выглядеть ровно в 2 раза шире английских букв с помощью CSS?


html fonts css textarea monospace
person optimizitor    schedule 19.05.2018    source источник
comment
Вы должны изменить шрифт на какой-то другой, кроме моноширинного, особенно на моноширинный шрифт, который поддерживает китайские символы.   -  person Ṃųỻịgǻňạcểơửṩ    schedule 19.05.2018

Ответы (2)


arrow_upward
2
arrow_downward

В вашем случае шрифт monospace не поддерживает китайские символы, и поэтому используется (нежелательный) резервный китайский шрифт, который не «взаимодействует» с вашими английскими буквами в шрифте monospace.

Кроме того, вы не можете изменить ширину глифа шрифта на любую желаемую ширину с помощью CSS, хотя font-stretch существует. Регулировка размера или ширины работает, но влияет как на китайский, так и на английский текст, а ширина зависит от ширины пробелов.

К сожалению, простого способа нет. Лучше всего использовать моноширинный шрифт, который поддерживает китайские символы и чтобы китайские символы были вдвое шире английских букв.

person Ṃųỻịgǻňạcểơửṩ    schedule 19.05.2018
comment
Спасибо, тоже подумала, что так и должно быть. Кстати, а кто-нибудь знает подходящие моноширинные шрифты, которые, возможно, уже установлены в большинстве операционных систем? Или какие-то надежные решения через обычные веб-сервисы? - person optimizitor; 19.05.2018
comment
Вероятно, вам нужен шрифт, похожий на этот: en.wikipedia.org/wiki/Halfwidth_and_fullwidth_forms - person Ṃųỻịgǻňạcểơửṩ; 26.05.2018

arrow_upward
1
arrow_downward

Вы можете использовать 細 明 體 (английское название: MingLiU), которое предварительно установлено Mircosoft Windows и широко используется в традиционном китайском мире.

см. объяснение в вики (только на китайском языке):

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 (思源 黑体). Они имеют открытый исходный код и могут свободно использоваться в любых целях.

person allenyllee    schedule 17.03.2021