4

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

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

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

4

1 回答 1

8

原来谷歌字体中缺少一些字形。

一种解决方法是 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（文本=参数）中包含所有必要的字符。

于 2018-10-09T02:10:49.807 回答