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

Я играл с сайтом, на котором изображен логотип в формате 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", моноширинный (также моноширинный, моноширинный хак), "Courier" и "Roboto Mono< /em>", но ни один из них не работал.

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

Есть ли какой-нибудь трюк, чтобы заставить это работать?

сайт можно посмотреть здесь disconnected.tech


android web google-chrome css monospace
person kimusan    schedule 17.08.2018    source источник
comment
Я также наблюдаю эту проблему в браузерах Chrome и Firefox для мобильных устройств (не могу проверить Safari прямо сейчас). Вот пример: codepen.io/anon/pen/pxRzwY Вот скриншот того, как это выглядит как на Android (Firefox и Chrome): i.imgur.com/pgB3HEi.jpg сам StackOverflow в какой-то момент у них возникла эта проблема, но с тех пор они ее решили: meta.stackexchange.com/questions/230878/ Я пробовал используя их тот же список font-family безрезультатно.   -  person    schedule 08.10.2018
comment
Кажется, в сети есть много ссылок на различные ошибки моноширинного Android, но я не могу решить их, используя их решения.   -  person    schedule 08.10.2018
comment
@Joe лучше отредактируйте вопрос с комментарием, чтобы включить все детали внутри вопроса.   -  person Temani Afif    schedule 09.10.2018

Ответы (1)


arrow_upward
7
arrow_downward

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

В качестве обходного пути можно использовать Source Code Pro от Adobe, в котором есть все символы (включая рисунок прямоугольника, который то, что мне было нужно). Mononoki также должен работать.

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

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

person Jacopo    schedule 09.10.2018
comment
Я только что попробовал Source Code Pro (используя Google Web Fonts), и он все еще не работает на Android: codepen.io/anon/pen/yRgXzO :/ - person ; 09.10.2018
comment
Великолепно! Я собираюсь самостоятельно разместить файлы шрифтов на случай, если страница github.io изменится. Спасибо! Будет назначена награда, когда StackOverflow позволит мне (нужно подождать еще 13 часов) - person ; 09.10.2018
comment
Спасибо @Jacopo. Использование шрифта Adobe непосредственно, похоже, решает проблему. Интересно, почему у них такой дефект в стандартных шрифтах в андроиде. - person kimusan; 10.10.2018
comment
любимый ответ на stackoverflow, было так много проблем с моношириной на мобильных устройствах. @Jacopo и другие ответы здесь - очень необходимое исправление: D - person Beau Bouchard; 18.10.2019
comment
Для меня Mononoki не сработало, но сработало преобразование пробелов в nbsp. - person Ellert van Koperen; 10.04.2020