title: Which font to render ASCII art on all browsers?
body: <p>The code below (generated with <a href="http://patorjk.com/software/taag/#p=display&amp;f=ANSI%20Shadow&amp;t=Type%20Something" rel="noreferrer">patorjk.com Text to ASCII Art Generator</a>) gives the expected result (a 'TEST' ASCII art text) on :</p>
  
  <ul>
  <li><p>Windows : Firefox, Chrome, IE</p></li>
  <li><p>Mac : Firefox</p></li>
  </ul>
  
  <p>But the result is <em>bad</em> (see note below) on :</p>
  
  <ul>
  <li>Mac : Chrome, Safari.</li>
  </ul>
  
  <p><strong>What should be used in order that a <code>&lt;pre&gt;</code> with <code>monospace</code> font is properly displayed crossbrowser ?</strong></p>
  
  <hr>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>pre{
   font-family: monospace;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;pre&gt;
  ████████╗███████╗███████╗████████╗
  ╚══██╔══╝██╔════╝██╔════╝╚══██╔══╝
     ██║   █████╗  ███████╗   ██║   
     ██║   ██╔══╝  ╚════██║   ██║   
     ██║   ███████╗███████║   ██║   
     ╚═╝   ╚══════╝╚══════╝   ╚═╝   
  &lt;/pre&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p><em>Note</em> : Here is the <em>bad</em> result : </p>
  
  <p><img src="https://i.stack.imgur.com/gebNc.png" alt="enter image description here"></p>