我正在玩一个显示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=参数(中包含所有必要的字符。