Как отображать специальные символы Unicode с использованием шрифта Monospace в HTML с консервированной шириной символов

StackOverflow https://stackoverflow.com/questions/9351689

Вопрос

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

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

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

Я проверил Chrome и Firefox, и они оба расширяют ширину специальных персонажей.

Это было полезно?

Решение

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

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

Даже если другие используемые шрифты являются шрифтом Monospace, они могут иметь разные предварительные ширины для символов. Например, Эверсон Моно имеет немного меньшую ширину, чем Деджаву Санс Моно. Анкет Быть моноспешением означает только это В пределах шрифта, все персонажи имеют одинаковую аванс ширину.

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

Другие советы

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top