Question

我在一个显示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 ”，等宽字体（也包括等宽字体，等宽字体hack），“ Courier ”和“ Roboto Mono ”，但它们都不起作用。

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

有什么技巧可以使它正常工作吗？

您可以在这里disconnected.tech

查看该网站

Answer 1

使用Google字体显示some gliphs are missing。

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

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

可能会告诉Google字体在其简化的源代码专业版（文本=参数）中包含所有必需的字符。

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

1 个答案: