Есть ли способ сделать шрифт переменной ширины действовать как шрифт фиксированной ширины в HTML?

Например, если у меня есть предложение, "Быстрая серая лиса перепрыгнула через ленивую собаку", отображаемую в "Courier New", шрифте с фиксированной шириной, она была бы более широкой, чем если бы она была в ширине переменной ширины, например, "Arial". Я хотел бы использовать "Arial" вместо "Courier New", но имеет фиксированную ширину символов.

Пример переменной ширины:
Быстрая серая лиса перепрыгнула через ленивую собаку.

Пример фиксированной ширины:

The quick grey fox jumped over the lazy dog

Обратите внимание, насколько близки символы друг к другу в слове "быстрый" и "серый" в каждом примере.

Ответ 1

Не только с CSS. Я бы порекомендовал вам использовать популярный Lettering.js (для этого вам понадобится jQuery), чтобы генерировать теги span вокруг каждого символа, затем установите ширину для всех символов.

.monospace > span {
  display: inline-block; /* Enable widths */
  width: 1em;            /* Set width across all characters */
  text-align: center;    /* Even out spacing */
}

Тест-сценарий

Ответ 2

Единственное, что я могу придумать, это поместить каждую букву в элемент HTML и стилизовать этот элемент по строкам:

width: 8px;         /* Whatever fixed width you want here */
display: block;     /* Force the width to be respected. See also: inline-block */
float: left;        /* So it won't be 1-per-line. Not needed for inline-block */
text-align: center; /* So the character appears in the middle of the block */

Я не знаком с Flex, но если бы я должен был реализовать этот подход, я бы добавил несколько Javascript, которые бы генерировали для меня все элементы.

Ответ 3

Результат должен быть дрянным, поскольку для этого не созданы пропорциональные шрифты.

Тем не менее, вы можете добиться этого с помощью индивидуальных span вокруг символов: http://jsfiddle.net/rvYES/

body {
  font: normal 100%/1.5 Arial;
}

span {
  outline: 1px dotted darkred;
}
span:nth-of-type(even) {
  outline-color: blue;
}

.w-fixed span {
  display: inline-block;
  min-width: 1em;
}

Я добавил визуальные подсказки (контур), чтобы увидеть, что происходит, и использовал min-width на всякий случай, а не width.
Этот метод вызовет огромную проблему доступности со считывателями экрана, для слепых и частично зрячих людей, использующих эти вспомогательные технологии. Письма, находящиеся в индивидуальном span, будут записаны/прочитаны о
п
e

б
y

о
п
e

ш
ч
я
л
e

о
г
м

l

р

г

г
г

р
h

ш
о
у
л
d

б
e

г
е

d

а
s

s
е
п
т
е
п
с
е
,

а
s

и
s
у

л
,

P
г
е
т
т
y

а
п
п
о
у
я
п
g

е
ч

каламбур предназначен

Ответ 4

Это старый вопрос, но я бы предложил искать подходящий шрифт фиксированной ширины, который можно использовать как webfont, у которого есть нужные функции. Например, я довольно большой поклонник Inconsolata.

Я бы начал с Google Fonts и отменил выбор всех категорий, оставив только Monospace.

Ответ 5

Возможно, вы сможете использовать свойство CSS с буквенным расположением, чтобы получить то, что вы хотите. По определению, моноширинные шрифты имеют одинаковую ширину символов в отличие от засечек или без засечек. Использование буквенного интервала - лучший выбор W3C Reference