Как исправить неправильную ширину моноширинных пространств в Android Chrome/Firefox?

Question

Я играл с сайтом, на котором изображен логотип ASCII/ANSI, и в браузерах настольных компьютеров все отлично работает.

Тогда я хотел посмотреть, работает ли он на мобильных устройствах, но здесь кажется, что пробелы имеют неправильную ширину. Часть сайта, показывающая ASCII- арт, обернута в <div> со следующими свойствами CSS:

line-height:1em;
color: #ff791a; 
white-space: pre !important;
font-size: 0.7vw; 
margin: 20% 50% 0 0;
font-family: 'Druid San Mono',courier, monospace, monospace;
width: 100%;
height: 100px;

Я пробовал с несколькими вариантами шрифтов, такими как " Druid Sans Mono ", monospace (также monospace, monospace hack), " Courier " и " Roboto Mono ", но ни один из них не работал.

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

Есть ли хитрость, чтобы заставить это работать?

Вы можете увидеть сайт здесь.

Answer 1

Оказывается, некоторые шрифты отсутствуют в Google шрифтах.

Обходной путь - это исходный код Adobe Pro, в котором есть все символы (включая рисунок в рамке, что мне и нужно). Мононоки тоже должны работать.

Я включаю прямо из Adobe, а не через Google Fonts: https://adobe-fonts.github.io/source-code-pro/source-code-pro.css

Возможно, можно указать Google Fonts включить все необходимые символы в сокращенный исходный код Pro (text= параметр).