哪种字体在所有浏览器上呈现 ASCII 艺术？

Question

下面的代码（使用patorjk.com Text to ASCII Art Generator 生成）给出了预期的结果（'TEST' ASCII art text）：

• Windows : 火狐、Chrome、IE

• Mac : 火狐

但结果很糟糕（见下面的注释）：

• Mac：Chrome、Safari。

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

---

pre{
 font-family: monospace;
}

<pre>
??????????????????????????????????
??????????????????????????????????
   ???   ??????  ????????   ???   
   ???   ??????  ????????   ???   
   ???   ????????????????   ???   
   ???   ????????????????   ???   
</pre>

---

注意：这是不好的结果：

Answer 1

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

\n\n

<style>\npre {\n\nfont-family: "Courier New", Courier, monospace;\n\n}\n</style>\n\n<pre>\n\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x95\x97\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x95\x97\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x95\x97\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x95\x97\n\xe2\x95\x9a\xe2\x95\x90\xe2\x95\x90\xe2\x96\x88\xe2\x96\x88\xe2\x95\x94\xe2\x95\x90\xe2\x95\x90\xe2\x95\x9d\xe2\x96\x88\xe2\x96\x88\xe2\x95\x94\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x9d\xe2\x96\x88\xe2\x96\x88\xe2\x95\x94\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x9d\xe2\x95\x9a\xe2\x95\x90\xe2\x95\x90\xe2\x96\x88\xe2\x96\x88\xe2\x95\x94\xe2\x95\x90\xe2\x95\x90\xe2\x95\x9d\n   \xe2\x96\x88\xe2\x96\x88\xe2\x95\x91   \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x95\x97  \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x95\x97   \xe2\x96\x88\xe2\x96\x88\xe2\x95\x91   \n   \xe2\x96\x88\xe2\x96\x88\xe2\x95\x91   \xe2\x96\x88\xe2\x96\x88\xe2\x95\x94\xe2\x95\x90\xe2\x95\x90\xe2\x95\x9d  \xe2\x95\x9a\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x96\x88\xe2\x96\x88\xe2\x95\x91   \xe2\x96\x88\xe2\x96\x88\xe2\x95\x91   \n   \xe2\x96\x88\xe2\x96\x88\xe2\x95\x91   \xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x95\x97\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x96\x88\xe2\x95\x91   \xe2\x96\x88\xe2\x96\x88\xe2\x95\x91   \n   \xe2\x95\x9a\xe2\x95\x90\xe2\x95\x9d   \xe2\x95\x9a\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x9d\xe2\x95\x9a\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x9d   \xe2\x95\x9a\xe2\x95\x90\xe2\x95\x9d   \n</pre>\n

\n

Answer 2

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

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

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

背景信息和解释：在 HTML 中使用特殊字符的指南。

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