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

Question

以下代码（使用patorjk.com Text to ASCII Art Generator生成）会在以下代码中显示预期结果（＆＃39; TEST＆＃39; ASCII艺术文字）：

• Windows：Firefox，Chrome，IE

• Mac：Firefox

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

• Mac：Chrome，Safari。

如果<pre> monospace字体正确显示为crossbrowser，应该使用哪些内容？

---

＆＃13;

＆＃13;

pre{
 font-family: monospace;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

---

注意：这是错误的结果：

Answer 1

从截图中可以看出，字符“═”U + 2550来自与其他字符不同的字体：它的形状不同，并且不应该像它应该的那样与它们连接，并且它相当宽。这打破了演示文稿和预期形状的等宽性。

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

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

背景信息和解释：Guide to using special characters in HTML。

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

Answer 2

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

<style>
pre {

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

}
</style>

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

Answer 3

将每个字符（！）放在一个范围内（而不是pre），并为此范围类定义css width：1em（或0.5em）和height：1em。