我在 html 页面上有一个大尺寸的 ASCII 文本艺术图像,但我无法在 html 页面上减小它的大小。
它看起来像这样:
__________¶¶_¶¶__¶¶_¶¶_
_________¶¶_¶¶_¶¶_¶¶_¶¶¶
_____¶¶¶¶¶____________¶¶¶¶¶¶¶
___¶¶¶¶¶_______________¶¶¶¶¶¶¶
__¶¶¶¶¶__________________¶¶¶¶¶
__¶¶¶¶____________________¶¶¶
___¶¶______________________¶¶¶
___¶________________________¶¶¶¶
__¶¶_____¶¶¶______¶¶________¶¶¶¶¶¶¶
__¶_____¶¶¶¶_____¶¶¶¶¶______¶¶¶¶¶¶_¶
__¶____¶¶¶¶¶____¶¶¶¶¶¶¶¶____¶¶¶¶¶¶__¶
__¶¶__¶¶¶¶¶______¶¶¶¶¶¶¶___¶¶¶¶¶¶¶___¶
___¶__¶¶¶__________¶¶¶¶___¶¶¶¶¶¶¶¶¶___¶
___¶¶____________________¶¶¶¶¶¶¶¶¶¶___¶¶¶
___¶¶¶_____¶¶¶¶¶¶_______¶¶¶¶¶¶¶¶¶¶¶___¶¶¶¶
___¶¶¶¶¶___¶¶¶¶¶¶_____¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶
___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶
___¶¶¶¶¶¶¶¶__¶¶¶___¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶
____¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
____¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶¶¶
____¶¶¶¶¶¶¶¶¶_¶¶¶¶¶¶¶_¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶¶¶¶
__¶¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶ ¶¶¶¶¶
__¶¶¶¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶
___¶¶¶¶¶¶¶_________¶¶¶¶¶¶¶¶¶¶¶¶
___________________¶¶¶¶¶¶¶¶¶¶¶
___________________¶¶¶¶¶¶¶¶¶¶
文本,所以它受到字体的影响,或者更直接地受到font-size
请参阅此处的示例 CodePen,或我通过点击"运行代码片段"按钮在下面包含的示例。你可以对你的 ascii 设计做任何事情font
你可以做任何事情。
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>