如何减小 ASCII 文字艺术图片的大小答案

【问题标题】：How to reduce the size of an ASCII text art picture如何减小 ASCII 文字艺术图片的大小
【发布时间】：2016-07-02 22:12:45
【问题描述】：

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

看起来像这样：

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

【问题讨论】：

我会在下面的回答中告诉你如何做。

标签： html text ascii symbols

【解决方案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>

【讨论】：