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

Question

我在玩一个显示 ASCII/ANSI 艺术标志的网站，一切似乎都在桌面浏览器中运行良好。

然后我想看看它是否适用于移动设备，但这里的空格宽度似乎不正确。显示 ASCII 艺术字的网站部分包裹在 <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”、等宽字体(也是等宽字体、等宽字体 hack)、“Courier”和“ Roboto Mono”，但它们都不起作用。

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

有什么技巧可以让它发挥作用吗？

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

Answer 1

结果 some gliphs are missing在谷歌字体中。

解决方法是 Adob​​e 的 Source Code Pro ，其中包含所有字符(包括方框图，这是我需要的)。 Mononoki也应该有效。

我直接从 Adob​​e 添加，而不是通过 Google 字体:https://adobe-fonts.github.io/source-code-pro/source-code-pro.css

可能会告诉 Google Fonts 在其简化的 Source Code Pro(文本=参数)中包含所有必要的字符。