What is the font for rendering ASCII art in all browsers?
The code below (generated with patorjk.com ASCII Art Generator Text ) gives the expected output ('TEST' ASCII text text) on:
-
Windows: Firefox, Chrome, IE
-
Mac: Firefox
But the result is bad (see note below):
- Mac: Chrome, Safari.
What should be used to display the font correctly <pre>
with monospace
cross-browser?
pre{
font-family: monospace;
}
<pre>
ββββββββββββββββββββββββββββββββββ
ββββββββββββββββββββββββββββββββββ
βββ ββββββ ββββββββ βββ
βββ ββββββ ββββββββ βββ
βββ ββββββββββββββββ βββ
βββ ββββββββββββββββ βββ
</pre>
Note. Here's the result:
source to share
Monospaced fonts can be slightly different in different browsers. Try to specify a specific css font like:
<style>
pre {
font-family: "Courier New", Courier, monospace;
}
</style>
<pre>
ββββββββββββββββββββββββββββββββββ
ββββββββββββββββββββββββββββββββββ
βββ ββββββ ββββββββ βββ
βββ ββββββ ββββββββ βββ
βββ ββββββββββββββββ βββ
βββ ββββββββββββββββ βββ
</pre>
source to share
From the screenshot you can see that the symbol "β" U + 2550 has a different font than the other symbols: it is different in shape and does not attach to them as it should, and is much wider. This violates the monocosmic nature of the presentation and the intended form.
The reason is that the default monospace font (ie the font that is generated by the common name monospace
) for some browsers does not contain a glyph for "β", so the browser must pick it up from some other font (using its internal fallback list fonts).
The only safe way (or as safe as possible) is to find a free monospace font that contains the characters you want and use that as the downloadable font via @font-face
. I believe DejaVu Sans Mono or FreeMono can qualify.
Background information and explanations: A guide to using special characters in HTML .
Why is it so hard? Well, monospaced fonts are an old invention, but a lot of them have a rather limited character repertoire. Note that "ASCII art" is often not (just) ASCII these days; for example, "β" is not an ASCII character.
source to share