ASCII 艺术在 Android 设备上呈现不同？

Question

在 Android 设备上呈现一些 ASCII 艺术有一个小问题，我在这里有一个网站 https://crowdesk.org/android/basictest.html ，如果您在桌面或 iOS 上查看此网站它正常呈现的设备如您所见

然而，当我在 Android 设备上查看网站时，（已尝试 Android Chrome 和三星互联网）它呈现的方式大不相同。我的直觉告诉我这是一个 Android 特定的字体渲染怪癖，可能与 Unicode Block 元素的渲染有关？虽然我认为它也可以处理等宽字体。

就代码而言，我正在使用指示预格式化文本的 pre 标签，另请注意，此问题似乎不受屏幕尺寸的影响，而我只能在以下情况下模拟该问题从实际 Android 设备查看。

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

Answer 1

通过跟进 Giacomo Catenazzi 的评论解决了我自己的问题，基本上我下载了 Courier 的副本并将其放在我的网络服务器上，然后使用字体规范强制预使用该版本的 Courier。现在工作:)

pre {
    font-family: Courier;
}

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

ASCII 艺术在 Android 设备上呈现不同？

ASCII art renders differently on Android devices?

android

utf-8

fonts

pre

ascii-art