在所有浏览器上呈现 ASCII 艺术的字体是什么？答案

【问题标题】：Which font to render ASCII art on all browsers?在所有浏览器上呈现 ASCII 艺术的字体是什么？
【发布时间】：2014-12-09 15:10:47
【问题描述】：

下面的代码（使用patorjk.com Text to ASCII Art Generator 生成）给出了预期的结果（“TEST”ASCII 艺术文本）：

Windows：Firefox、Chrome、IE
Mac : 火狐

但结果是 bad（见下面的注释）：

Mac：Chrome、Safari。

应该使用什么来正确显示带有monospace 字体的<pre> 跨浏览器？

pre{
 font-family: monospace;
}

<pre>
████████╗███████╗███████╗████████╗
╚══██╔══╝██╔════╝██╔════╝╚══██╔══╝
   ██║   █████╗  ███████╗   ██║   
   ██║   ██╔══╝  ╚════██║   ██║   
   ██║   ███████╗███████║   ██║   
   ╚═╝   ╚══════╝╚══════╝   ╚═╝   
</pre>

注意：这是不好的结果：

【问题讨论】：

这里的“坏”是什么？文本图形在很大程度上取决于所使用的字体，因此这似乎是您的设计与您测试的浏览器中的默认等宽字体相比的问题。
@JukkaK.Korpela 我添加了“坏”结果的屏幕截图。我相信我们可以找到一种显示 ASCII 艺术的方法，这样每个浏览器的结果都是一样的，对吧？这就是这里的问题：如何跨浏览器显示 ASCII 艺术？
您是从服务器加载特定字体，还是依赖每个客户端的默认等宽字体？
@colonelsanders 我刚刚使用了font-family: monospace;，但我不知道：我应该使用什么来渲染在patorjk.com/software/taag/… 上生成的跨浏览器内容？（这是我的问题）
强制服务器提供的字体（作为字体文件）会起作用，假设客户端的字体有问题。它至少很容易测试。 css-tricks.com/snippets/css/using-font-face

标签： html css macos safari ascii-art

【解决方案1】：

等宽字体在不同浏览器上可能略有不同。尝试指定特定的 css 字体，如下所示：

<style>
pre {

font-family: "Courier New", Courier, monospace;

}
</style>

<pre>
████████╗███████╗███████╗████████╗
╚══██╔══╝██╔════╝██╔════╝╚══██╔══╝
   ██║   █████╗  ███████╗   ██║   
   ██║   ██╔══╝  ╚════██║   ██║   
   ██║   ███████╗███████║   ██║   
   ╚═╝   ╚══════╝╚══════╝   ╚═╝   
</pre>

【讨论】：

【解决方案2】：

从截图中可以看出，字符“═”U+2550 的字体与其他字符不同：它的形状不同，并没有按应有的方式与它们连接，而且要宽得多。这打破了演示文稿的等宽性质和预期的形状。

原因是某些浏览器的默认等宽字体（即通用名称monospace映射到的字体）不包含“═”字形，因此浏览器必须从其他一些字体（使用其内部备用字体列表）。

唯一安全的方法（或尽可能安全的方法）是通过@font-face 找到包含所需字符的免费等宽字体并将其用作可下载字体。我想 DejaVu Sans Mono 或 FreeMono 可能符合条件。

背景信息及说明：Guide to using special characters in HTML。

为什么这么复杂？好吧，等宽字体是一项古老的发明，但其中许多字体的字符库相当有限。请注意，如今“ASCII 艺术”通常不仅仅是（只是）ASCII；例如，“═”不是 ASCII 字符。

【讨论】：

【解决方案3】：

将每个字符 (!) 放在一个 span（而不是 pre）中，并为此 span 类定义 css width:1em（或 0.5em）和 height:1em。

【讨论】：