【发布时间】：2017-07-22 07:44:18
【问题描述】：
我正在开发一个小网络应用程序。
我尝试使用 boxdrawing 字符以一种 ascii 艺术方式显示一些输出。
但是，我注意到在 Android 上，空格 ( ) 与其他字符的宽度不相等，导致输出丑陋。
我将字体设置为monospace，甚至尝试了monospace,monospace CSS 设置。
看看我在说什么：
请在 Android 和桌面浏览器上打开 https://tpgnow.herokuapp.com/CERN。
我尝试了不同的浏览器、平台和设备。 它似乎适用于 Win、Mac、Chrome 和 Firefox，也适用于 iOS，但不适用于 Android（无论是 Chrome 还是 Firefox）。
有人有解决这个问题的办法吗？
【问题讨论】：
-
只是说它是等宽的并没有使它是等宽。您使用的字体实际上是真正的等宽字体吗？如果没有，你所做的任何事情都不会神奇地使它成为一个。话虽如此，为什么不使用
 而不是设置CSS，以便空白处理使用pre，以便空格和换行符显示为普通文本？ -
我尝试同时使用：
font-family: monospace,monospace;和font-family: font-family: "DejaVu Sans Mono", "Menlo", "Lucida Sans Typewriter", "Lucida Console", "monaco", "Bitstream Vera Sans Mono", monospace;我还尝试了&nbsp;和普通空间。它也被包裹在<pre>标签中。该问题只出现在Android上（桌面显示，iOS为手机） -
为什么有这么多字体。对 DejaVu Sans Mono 使用
@font-face声明，并回退到monospace。您测试了哪些 Android 版本？ -
我按照建议做了（@font-face，删除了许多等宽字体，没有成功。我在我的 OPO 上测试了 6.0，在华为 M3 上测试了 6.0，在朋友的三星上测试了 5.0，同样的行为。你能重现行为？（从安卓手机和浏览器浏览tpgnow.herokuapp.com/CERN应该会显示差异）
-
是的，nexus 6P 与 android 7 显示相同的结果。您是否尝试过通过 USB 使用 Firefox 或 Chrome 进行调试？ （两者都可以让您将桌面上的浏览器连接到手机，以便您可以使用桌面上的开发工具来检查手机上发生的情况）。可能会提供一些线索，说明 android 手机认为它应该显示哪些内容，以及它实际应用了哪些 CSS
标签： android html css fonts monospace