如何在 Android Chrome/Firefox 中修复等宽空间的宽度不正确？答案

【问题标题】：How do I fix monospace spaces not being correct width in Android Chrome/Firefox?如何在 Android Chrome/Firefox 中修复等宽空间的宽度不正确？
【发布时间】：2019-01-24 07:30:36
【问题描述】：

我正在玩一个显示 ASCII/ANSI 艺术徽标的网站，并且在桌面浏览器中似乎一切正常。

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

我尝试过多种字体，例如“Druid Sans Mono”、monospace（也是 monospace、monospace hack）、“Courier”和“ Roboto Mono”，但它们都不起作用。

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

有什么技巧可以让它工作吗？

您可以在这里查看该网站disconnected.tech

【问题讨论】：

我在移动设备上的 Chrome 和 Firefox 上也看到了这个问题（现在无法测试 Safari）。这是一个例子：codepen.io/anon/pen/pxRzwY 这是它在 Android（Firefox 和 Chrome）上的样子：i.imgur.com/pgB3HEi.jpg StackOverflow 本身似乎在某些时候遇到了这个问题，但他们已经解决了这个问题：meta.stackexchange.com/questions/230878/… 我已经尝试使用他们相同的font-family 列表无济于事。
网上似乎有很多关于各种Android monospace bug的参考，但我似乎无法使用他们的解决方案来解决它。
@Joe 最好用评论编辑问题，以包含问题中的所有详细信息

标签： android css google-chrome web monospace

【解决方案1】：

原来some gliphs are missing 是 Google 字体。

一种解决方法是 Adobe 的 Source Code Pro，它包含所有字符（包括我需要的方框图）。 Mononoki 也应该可以工作。

我直接包含来自 Adobe，而不是通过 Google 字体：https://adobe-fonts.github.io/source-code-pro/source-code-pro.css

可以告诉 Google 字体在其精简的 Source Code Pro 中包含所有必要的字符（文本 = 参数）。

【讨论】：

我刚刚尝试了“Source Code Pro”（使用 Google Web 字体），但它似乎仍然无法在 Android 上运行：codepen.io/anon/pen/yRgXzO：/
太棒了！我将自行托管字体文件，以防 github.io 页面发生更改。谢谢！当 StackOverflow 允许我时将奖励赏金（需要再等 13 个小时）
谢谢@Jacopo。直接使用adobe字体似乎可以解决问题。我想知道为什么他们在android的标准字体中有这个缺陷。
stackoverflow 上最喜欢的答案，移动设备上的等宽字体有很多问题。 @Jacopo 和这里的其他答案是非常需要的修复：D
对我来说 Mononoki 没有用，但是将空格转换为 nbsp 可以。