如何减小ASCII文本艺术图片的大小

Question

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

看起来像这样：

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

Answer 1

它是文字，因此受字体影响，或更直接地受font-size

影响

点击“运行代码段”按钮，查看示例CodePen here或下面的示例。你可以对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>