如何修复等宽空格在安卓Chrome / Firefox中宽度不正确的问题?



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

然后我想看看它是否适用于移动设备,但这里似乎空格的宽度错误。 网站中显示ASCII艺术的部分包含在具有以下 CSS 属性的<div>中:

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 SansMono",monospace(也是monospace,monospace hack(,">Courier"和">Roboto Mono",但没有一个有效。

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

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

您可以在此处查看该网站 disconnected.tech

事实证明,谷歌字体中缺少一些格利夫。

解决方法是Adobe的源代码专业版,其中包含所有字符(包括框绘图,这是我所需要的(。莫诺基也应该工作。

我直接从Adobe收录,而不是通过Google Fonts:https://adobe-fonts.github.io/source-code-pro/source-code-pro.css

也许可以告诉Google字体在其简化的源代码专业版(text=参数(中包含所有必要的字符。

最新更新