Искусство ASCII по-разному отображается на устройствах Android?

Возникла небольшая проблема с рендерингом некоторых изображений ASCII на устройствах Android. У меня есть сайт здесь https://crowdesk.org/android/basictest.html , Если вы просматриваете этот сайт на настольном компьютере или устройстве iOS, он отображается нормально. Как видите,

хорошо отображаемый ASCII

Однако, когда я просматриваю веб-сайт на устройствах Android (попробовал Android Chrome и Интернет Samsung), он отображается совсем по-другому. Моя интуиция подсказывает мне, что это особенность рендеринга шрифтов для Android, возможно, связанная с рендерингом элементов блока Unicode? Хотя я думаю, что он также может что-то делать с моноширинными шрифтами.

введите здесь описание изображения

Что касается кода, я использую теги pre, которые указывают на предварительно отформатированный текст, также обратите внимание, что на эту проблему, похоже, не влияет размер экрана, скорее, я смог только эмулировать проблему при просмотре с реального Android устройство.

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width" charset="utf-8">
<pre>
  +--------------------------------------+
  |                                      |
  |                     ▄▄▄      ▄▄▄     |
  |    Idena            █  ▀▄▄▄▄▀  █     |
  |                  ▄▀ █ ▄▄    ▄▄▄▀ ▌▄  |
  |                  ▀  ▌▓▄▄▌▌▐▐▒▄▓▐ ▌▀  |
  |                 ▐   █    ▌▐    █ ▌▀▌ |
  |                  ▓  █    ▄▄    █ ▌▓  |
  |                  ▀█ ▌▌▄ ▀▓▓▀  ▓▐ █▀  |
  |                     ▌▌▌▌▄  ▄▓▀▐▐     |
  |                       ▀▀▄▄▄▄ ▀       |
  |                                      |
  +--------------------------------------+
</pre>
</html>


android fonts ascii-art utf-8 pre
person ViQRC    schedule 26.07.2020    source источник
comment
Это может быть просто проблема со шрифтом. Не все шрифты с фиксированной шириной действительно имеют фиксированную ширину для всех глифов. Гораздо лучше указать шрифт или просто использовать символы ASCII для ASCII-графики (не только самой чистой формы ASCII-графики, но и с меньшими проблемами со шрифтом).   -  person Giacomo Catenazzi    schedule 27.07.2020

Ответы (1)


arrow_upward
1
arrow_downward

Решил свою проблему, следуя комментарию Джакомо Катенацци, в основном я скачал копию Courier, поместил ее на свой веб-сервер, а затем заставил предварительно использовать эту версию Courier, используя спецификацию шрифта. Работает в настоящее время :)

pre {
    font-family: Courier;
}

@font-face {
  font-family: Courier;
  src: url(Courier.ttf);
}

person ViQRC    schedule 27.07.2020