如何修复Android Chrome/Firefox中单空格宽度不正确的问题？

我在玩一个显示ASCII/ANSI艺术标志的网站，在桌面浏览器中一切都很好

然后我想看看它是否适用于移动设备，但在这里，似乎空白的宽度是错误的。 显示ASCII艺术的网站部分被包装在具有以下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;

我试过几种不同的字体，如“德鲁伊无单声道”，单声道（也是单声道，单声道黑客），“信使”和“机器人单声道”，但都不起作用

我还尝试使用

nbsp

而不仅仅是空格。 改变字母间距似乎也没有达到我想要的效果

有什么诀窍可以让它发挥作用吗

你可以在这里看到这个网站

以谷歌字体显示

解决方法是Adobe的，它具有所有字符（包括我需要的方框图）。也应该有效

我包括直接来自Adobe，而不是通过Google字体：

---

也许可以告诉Google Fonts在其简化的源代码Pro（text=parameter）中包含所有必要的字符。

我也在手机上的Chrome和Firefox上看到了这个问题（目前无法测试Safari）。这里有一个例子：这是Android（Firefox和Chrome）上的屏幕盖：StackOverflow本身在某个时候似乎有这个问题，但他们已经解决了：我尝试使用他们相同的

字体系列
列表，但没有用。网络上似乎有很多关于各种Android monospace bug的引用，但我似乎无法用他们的解决方案解决问题。@乔最好用注释编辑问题，将所有细节都包含在问题中。我刚刚尝试了“Source Code Pro”（使用谷歌网页字体），但它似乎在Android上仍然不起作用：：/Brilliant！我将自行托管字体文件，以防github.io页面发生更改。谢谢当StackOverflow让我（需要再等13个小时）感谢@Jacopo时，我将奖励赏金。直接使用adobe字体似乎可以解决这个问题。我想知道为什么android的标准字体会有这种缺陷。stackoverflow上最喜欢的答案是，手机上的monospace有这么多问题@雅格布和这里的其他答案是一个急需解决的问题：对于我来说，Mononoki不起作用，但将空格转换为nbsp的却起了作用。