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

Question

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

• Windows:Firefox、Chrome、IE

• 苹果机:火狐

但结果不好(见下面的注释):

• Mac:Chrome、Safari。

为了 <pre> 应该使用什么与 monospace字体是否在跨浏览器中正确显示？

---

pre{
 font-family: monospace;
}

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

---

注意:这是不好的结果:

Answer 1

从截图中可以看出，字符“═”U+2550 与其他字符来自不同的字体:形状不同，没有按应有的方式连接，而且宽度相当大。这打破了演示文稿的等宽性质和预期的形状。

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

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

背景信息和解释:Guide to using special characters in HTML .

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