如何缩小ASCII文字艺术图片的大小

Question

我在 html 页面上有一个大尺寸的 ASCII 文本艺术图像，但我无法在 html 页面上缩小它的尺寸。

看起来像这样：

__________¶¶_¶¶__¶¶_¶¶_ _________¶¶_¶¶_¶¶_¶¶_¶¶¶ _____¶¶¶¶¶____________¶¶¶¶¶¶¶ ___¶¶¶¶¶_______________¶¶¶¶¶¶¶ __¶¶¶¶¶__________________¶¶¶¶¶ __¶¶¶¶____________________¶¶¶ ___¶¶______________________¶¶¶ ___¶________________________¶¶¶¶ __¶¶_____¶¶¶______¶¶________¶¶¶¶¶¶¶ __¶_____¶¶¶¶_____¶¶¶¶¶______¶¶¶¶¶¶_¶ __¶____¶¶¶¶¶____¶¶¶¶¶¶¶¶____¶¶¶¶¶¶__¶ __¶¶__¶¶¶¶¶______¶¶¶¶¶¶¶___¶¶¶¶¶¶¶___¶ ___¶__¶¶¶__________¶¶¶¶___¶¶¶¶¶¶¶¶¶___¶ ___¶¶____________________¶¶¶¶¶¶¶¶¶¶___¶¶¶ ___¶¶¶_____¶¶¶¶¶¶_______¶¶¶¶¶¶¶¶¶¶¶___¶¶¶¶ ___¶¶¶¶¶___¶¶¶¶¶¶_____¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶ ___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶ ___¶¶¶¶¶¶¶¶__¶¶¶___¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶ ____¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ ____¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶¶¶ ____¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶ __¶¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶ __¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶ ___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶ ___________________¶¶¶¶¶¶¶¶¶¶¶ ___________________¶¶¶¶¶¶¶¶¶¶

Answer 1

是Text，所以受字体的影响，更直接的说是font-size

查看示例 CodePen here，或者我通过点击 "Run Code Snippet" 按钮在下面包含的示例。您可以对 font 做的任何事情都可以对您的 ascii 设计做。

pre {display: inline-block}
pre#normal {font-size: 100%}
pre#smaller {font-size: 50%}
pre#smallest {font-size: 20%}

<pre id="normal">
__________¶¶_¶¶__¶¶_¶¶_
_________¶¶_¶¶_¶¶_¶¶_¶¶¶ 
_____¶¶¶¶¶____________¶¶¶¶¶¶¶ 
___¶¶¶¶¶_______________¶¶¶¶¶¶¶ 
__¶¶¶¶¶__________________¶¶¶¶¶ 
__¶¶¶¶____________________¶¶¶
___¶¶______________________¶¶¶ 
___¶________________________¶¶¶¶ 
__¶¶_____¶¶¶______¶¶________¶¶¶¶¶¶¶ 
__¶_____¶¶¶¶_____¶¶¶¶¶______¶¶¶¶¶¶_¶ 
__¶____¶¶¶¶¶____¶¶¶¶¶¶¶¶____¶¶¶¶¶¶__¶ 
__¶¶__¶¶¶¶¶______¶¶¶¶¶¶¶___¶¶¶¶¶¶¶___¶ 
___¶__¶¶¶__________¶¶¶¶___¶¶¶¶¶¶¶¶¶___¶ 
___¶¶____________________¶¶¶¶¶¶¶¶¶¶___¶¶¶ 
___¶¶¶_____¶¶¶¶¶¶_______¶¶¶¶¶¶¶¶¶¶¶___¶¶¶¶ 
___¶¶¶¶¶___¶¶¶¶¶¶_____¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶ 
___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶ 
___¶¶¶¶¶¶¶¶__¶¶¶___¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶ 
____¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ 
____¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶¶¶ 
____¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶ 
__¶¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶ 
__¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶ 
___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶ 
___________________¶¶¶¶¶¶¶¶¶¶¶ 
___________________¶¶¶¶¶¶¶¶¶¶
</pre>
<pre id="smaller">
__________¶¶_¶¶__¶¶_¶¶_
_________¶¶_¶¶_¶¶_¶¶_¶¶¶ 
_____¶¶¶¶¶____________¶¶¶¶¶¶¶ 
___¶¶¶¶¶_______________¶¶¶¶¶¶¶ 
__¶¶¶¶¶__________________¶¶¶¶¶ 
__¶¶¶¶____________________¶¶¶
___¶¶______________________¶¶¶ 
___¶________________________¶¶¶¶ 
__¶¶_____¶¶¶______¶¶________¶¶¶¶¶¶¶ 
__¶_____¶¶¶¶_____¶¶¶¶¶______¶¶¶¶¶¶_¶ 
__¶____¶¶¶¶¶____¶¶¶¶¶¶¶¶____¶¶¶¶¶¶__¶ 
__¶¶__¶¶¶¶¶______¶¶¶¶¶¶¶___¶¶¶¶¶¶¶___¶ 
___¶__¶¶¶__________¶¶¶¶___¶¶¶¶¶¶¶¶¶___¶ 
___¶¶____________________¶¶¶¶¶¶¶¶¶¶___¶¶¶ 
___¶¶¶_____¶¶¶¶¶¶_______¶¶¶¶¶¶¶¶¶¶¶___¶¶¶¶ 
___¶¶¶¶¶___¶¶¶¶¶¶_____¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶ 
___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶ 
___¶¶¶¶¶¶¶¶__¶¶¶___¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶ 
____¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ 
____¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶¶¶ 
____¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶ 
__¶¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶ 
__¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶ 
___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶ 
___________________¶¶¶¶¶¶¶¶¶¶¶ 
___________________¶¶¶¶¶¶¶¶¶¶
</pre>
<pre id="smallest">
__________¶¶_¶¶__¶¶_¶¶_
_________¶¶_¶¶_¶¶_¶¶_¶¶¶ 
_____¶¶¶¶¶____________¶¶¶¶¶¶¶ 
___¶¶¶¶¶_______________¶¶¶¶¶¶¶ 
__¶¶¶¶¶__________________¶¶¶¶¶ 
__¶¶¶¶____________________¶¶¶
___¶¶______________________¶¶¶ 
___¶________________________¶¶¶¶ 
__¶¶_____¶¶¶______¶¶________¶¶¶¶¶¶¶ 
__¶_____¶¶¶¶_____¶¶¶¶¶______¶¶¶¶¶¶_¶ 
__¶____¶¶¶¶¶____¶¶¶¶¶¶¶¶____¶¶¶¶¶¶__¶ 
__¶¶__¶¶¶¶¶______¶¶¶¶¶¶¶___¶¶¶¶¶¶¶___¶ 
___¶__¶¶¶__________¶¶¶¶___¶¶¶¶¶¶¶¶¶___¶ 
___¶¶____________________¶¶¶¶¶¶¶¶¶¶___¶¶¶ 
___¶¶¶_____¶¶¶¶¶¶_______¶¶¶¶¶¶¶¶¶¶¶___¶¶¶¶ 
___¶¶¶¶¶___¶¶¶¶¶¶_____¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶ 
___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶ 
___¶¶¶¶¶¶¶¶__¶¶¶___¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶ 
____¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ 
____¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶¶¶ 
____¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶ 
__¶¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶ 
__¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶ 
___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶ 
___________________¶¶¶¶¶¶¶¶¶¶¶ 
___________________¶¶¶¶¶¶¶¶¶¶
</pre>