安卓等宽空格（ ）的宽度与字符宽度不同

Question

我正在开发一个小型网络应用程序。 我尝试以一种类似于ASCII艺术的方式显示一些输出，使用了方框绘图字符。 然而，我注意到在Android上，空格（ ）与其他字符的宽度不相等，导致输出难看。

我已将字体设置为monospace，甚至尝试了monospace, monospace CSS设置。

要查看我在说什么：
请在Android上和桌面浏览器上打开https://tpgnow.herokuapp.com/CERN。

期望输出（桌面浏览器）：

实际输出（Android浏览器）：

我尝试了不同的浏览器、平台和设备。 它在Win、Mac、Chrome和Firefox上似乎可以运行，也可以在iOS上运行，但在Android上无法运行（无论是Chrome还是Firefox）。

有人有解决这个问题的方案吗？

- stklik

---

仅仅说它是等宽字体并不意味着它就是等宽字体。你使用的字体是否真正是等宽字体？如果不是，那么无论你做什么都不会神奇地变成等宽字体。话虽如此，为什么不设置CSS以便空格处理使用“pre”，这样空格和换行符就会显示为普通文本呢？ - Mike 'Pomax' Kamermans

我尝试使用以下两种方式：font-family: monospace,monospace; 和 font-family: font-family: "DejaVu Sans Mono", "Menlo", "Lucida Sans Typewriter", "Lucida Console", "monaco", "Bitstream Vera Sans Mono", monospace;。同时，我也尝试了使用   和普通空格。此外，它还被包裹在 <pre> 标签中。 这个问题只出现在 Android 上（在桌面和 iOS 上显示正常）。 - stklik

为什么有这么多字体？使用@font-face声明DejaVu Sans Mono，并回退到monospace。你测试过哪些版本的Android？ - Mike 'Pomax' Kamermans

似乎我在使用DejaVu时遇到了问题。现在我切换到使用“Menlo Regular”它可以正常工作。也许我之前使用的字体存在一些问题。非常感谢您的帮助！ - stklik

嗯，将这个问题提到Typedrawers上可能会很有趣，也可以联系Dejavu的开发人员（https://github.com/dejavu-fonts/dejavu-fonts）。我怀疑至少Moyogo会非常关心这个字体在Android现代浏览器中存在的问题。 - Mike 'Pomax' Kamermans

Answer 1

我遇到了完全相同的问题！在Google字体中框图符号丢失。

Adobe的源代码Pro有它们。Mononoki也应该有。

我怀疑Android等宽字体的许多其他问题都是由于这个普遍问题引起的。

- Jacopo

---

顺便说一下，我仍然不知道问题是什么。我改了我的代码和保存字体的位置。它“神奇地”开始工作了，我没有进一步调查。 - stklik

对我来说，Lucida Sans Typewriter 字体是 Android 上真正的等宽字体。 - Paulo Buchsbaum