Моноширинный шрифт для выравнивания текста с использованием пробелов делает его странным

Я использовал шрифт html по умолчанию — Liberation Serif—30 glyphs на своей странице. Затем я столкнулся с проблемой, что несколько пробелов для выравнивания двух столбцов текста не работают должным образом.

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

Теперь выравнивание выглядит хорошо, но шрифт не является общеупотребительным по корпоративным стандартам.

Как я могу использовать такой шрифт, как Liberation Serif, и при этом выполнять выравнивание с использованием пробелов?


fonts css monospace
person Saravana Kumar    schedule 15.05.2015    source источник
comment
Тег mono не относится к моноширинному тексту; обратитесь к информации о его теге   -  person D. Ben Knoble    schedule 15.05.2015
comment
Вы можете, но это ДЕЙСТВИТЕЛЬНО плохой способ выравнивания текста. Вы должны найти лучший способ выровнять текст.   -  person NendoTaka    schedule 15.05.2015

Ответы (2)


arrow_upward
1
arrow_downward

Если вы хотите выровнять текст в столбцах, как насчет использования <table>? Или, если это не табличные данные, немного CSS и float: left;.

person Matti Virkkunen    schedule 15.05.2015

arrow_upward
0
arrow_downward

Чтобы использовать моноширинный шрифт для примитивного форматирования в HTML, вы можете использовать элемент <pre> ... </pre>. На самом деле этот тег автоматически выберет для вас моноширинный шрифт:

<!-- the following shows the HTML, and the output will have the same column 
     formatting as it appears between the 'pre' tags -->
<pre>
      9      328
  2,345      208
    xyz        4
</pre>

<pre> означает сохранение. Вы также можете применить его как стиль css к другим типам тегов HTML. В этом случае вам нужно будет явно указать моноширинный шрифт (например, Consolas в Windows):

<div style='font-family:Consolas; white-space:pre;'>
      9        a
  2,345      quick
    xyz      f o x
</div>

Убедитесь, что текстовый редактор, который вы используете для создания HTML-файла, настроен на вставку символов space. Макет может выглядеть иначе в браузере, если он содержит какие-либо символы табуляции или смесь табуляции и пробела.

Кроме того, поскольку форматирование столбца и строки всего текста внутри тега <pre> точно сохраняется, приведенные выше примеры включают начальный разрыв строки перед первой строкой, что (в отличие от последнего разрыва строки) может вам не понадобиться. Это связано с тем, что включенный текст фактически начинается сразу после символа > открывающего тега. Есть несколько способов решить эту проблему, которые мы оставляем читателю в качестве упражнения.

person Glenn Slayden    schedule 01.07.2020