Как отобразить специальные символы Юникода, используя моноширинный шрифт в HTML с сохраненной шириной символов

Question

Я использую элемент pre для отображения текста, в том числе специальных символов Юникода (⚡ ⚑ ▶ ◀ ⁋). Я заметил, что браузеры отображают эти специальные символы шире, чем обычные, занимая больше места по горизонтали.

Это легко увидеть здесь: https://gist.github.com/968b5c22cce14909cf27 Обе строки имеют 20 символов, но обратите внимание, что первая длиннее (пиксели экрана).

Есть ли способ (CSS) заставить предварительные элементы (или другие элементы с примененным моноширинным шрифтом) иметь действительно фиксированную ширину символа?

Я проверил Chrome и Firefox, и они оба увеличили ширину специальных символов.

Answer 1

Причина в том, что некоторые символы отсутствуют в первом шрифте, указанном в применяемой декларации font-family.Таким образом, они будут отображаться другим шрифтом (ами) в системе, или отображается какой-то индикатор непредставительного символа.

Например, первый символ присутствует только в нескольких шрифтах, см. http://www.fileformat.info/info/unicode/char/26a1/fontsupport.htm (который охватывает не все шрифты, но большинство шрифтов, которые люди, вероятно, имеют на своих компьютерах).

Даже если другие используемые шрифты являются моноширинными, они могут иметь различную ширину продвижения для символов.Например, Everson Mono имеет немного меньшую ширину, чем DejaVu Sans Mono .Быть моноширинным означает только то, что внутри шрифта , все символы имеют одинаковую ширину перемещения.

Так что вам нужно будет использовать один шрифт, который содержит все необходимые вам символы.Для этой коллекции символов два вышеупомянутых шрифта, вероятно, являются единственными общедоступными моноширинными шрифтами, которые содержат их все.Ну, есть unifont , но это растровый шрифт с очень грубым дизайном;это может выглядеть терпимо в размере 12 пт или несколько больше.

Answer 2

Расширяет символы не браузер, а само определение шрифта. Я сомневаюсь, что существует действительно моноширинный шрифт, который включает все эти символы и определяет их все на одной ширине, но это то, что вы должны искать. См. этот вопрос для более подробной информации о том, почему это, вероятно, недоступно.