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

Question

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

• Windows：Firefox，Chrome，IE

• Mac：Firefox

但是结果是：：]上的坏（请参阅下面的注释）

• Mac：Chrome，Safari。

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

---

pre{
 font-family: monospace;
}
<pre>
████████╗███████╗███████╗████████╗
╚══██╔══╝██╔════╝██╔════╝╚══██╔══╝
   ██║   █████╗  ███████╗   ██║   
   ██║   ██╔══╝  ╚════██║   ██║   
   ██║   ███████╗███████║   ██║   
   ╚═╝   ╚══════╝╚══════╝   ╚═╝   
</pre>
Note

：这是bad

结果：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9nZWJOYy5wbmcifQ==” alt =“在此处输入图像描述”>

下面的代码（使用patorjk.com文本生成ASCII艺术生成器生成）在以下位置提供了预期的结果（“ TEST” ASCII艺术文本）：Windows：Firefox，Chrome，IE Mac：Firefox但结果不佳（.. 。

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

<style>
pre {

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

}
</style>

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

从屏幕截图中可以看出，字符“═” U + 2550的字体与其他字符的字体不同：它的形状不同，没有按需连接，并且宽度更大。这打破了演示文稿和预期形状的等宽性。

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

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

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

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

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

Answer 1

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

Answer 2

从屏幕截图中可以看出，字符“═” U + 2550的字体与其他字符的字体不同：它的形状不同，没有按需连接，并且宽度更大。这打破了演示文稿和预期形状的等宽性。

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

Answer 3

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