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

Question

下面的代码（使用patorjk.com文本到ASCII艺术生成器生成）在以下情况下会得到预期结果（一个“TEST” ASCII艺术文本）：

• Windows：Firefox，Chrome，IE

• Mac：Firefox

但是在以下情况下结果很差（请参见下面的注意事项）：

• Mac：Chrome，Safari。

为了使带有等宽字体的<pre>正确地跨浏览器显示，应该使用什么？

pre{
 font-family: monospace;
}

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

---

注意：以下是不好的结果：

- Basj

---

这里有什么“不好”？文本图形在很大程度上取决于所使用的字体，因此这似乎是您设计问题，而非您测试的浏览器中的默认等宽字体引起的。 - Jukka K. Korpela

你是从服务器加载特定字体，还是依赖于每个客户端的默认等宽字体？ - colonelsanders

强制使用服务器提供的字体文件可能会起作用，假设客户端的字体有问题。这至少很容易测试。http://css-tricks.com/snippets/css/using-font-face/ - colonelsanders

@colonelsanders，我们需要如此复杂的东西才能呈现等宽字体吗？（等宽字体来自计算机的早期时代）？ - Basj

由于存在数百种不同的等宽字体，如果Chrome for Mac OS使用了与Windows下的IE9不同的等宽字体，那么相同的文本块看起来会非常不同。强制使用标准字体可以解决这个问题。 - colonelsanders

Answer 1

等宽字体在不同浏览器上可能会略有不同。尝试指定具体的CSS字体，例如：

<style>
pre {

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

}
</style>

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

- Drazzah

Answer 2

从屏幕截图中可以看出，字符“═” U+2550 明显来自于不同的字体，它在形状上与其他字符不同，不能像应该那样连接在一起，并且宽度明显更宽。这破坏了演示文稿的等宽性和预期的形状。

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

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

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

为什么会这么麻烦呢？嗯，等宽字体是一个古老的发明，但其中许多字体的字符库相当有限。请注意，“ASCII艺术”现在通常不只是ASCII；例如，“═”不是ASCII字符。

- Jukka K. Korpela

Answer 3

将每个字符（！）放入一个 span 中（而不是 pre），并为该 span 类定义 css 宽度：1em（或0.5em）和高度：1em。

- Natalia