header image

正确显示AA的方法

我说的可不是H的东西!AA即ASCII Artwork(ASCII艺术),是一种用字符来组成图形的宅艺术。

起源就不说了,各位自己维基去。虽说这种东西在2ch上很流行,但是在国内却不怎么吃得开,其实原因很简单——字体!这些AA放到国内网站上不是变宽变窄,就是错位,实在是水土不服。

维基上介绍说把这些字符放到<pre></pre>标签里就行了,其实还是有可能无法正常显示。

说白了,要解决其实很简单——到2ch上去混!说笑说笑,既然是字体的问题那就对字体下手了。经过本人大量的尝试,发现MS PGothic字体在medium(视浏览器和网页设定而定,一般medium是16px)字号下可以正常显示(如果有谁发现其他字体也能正常显示的话一定要通知我!),而且这是Windows系统自带的字体,不用担心别人没有这个字体(手机、Linux等用户就抱歉了,其实Linux也可以从Windows下复制这个字体)。那我们就可以对症下药了。

因为<font></font>标签已经处于被淘汰的边缘了,我们就不讨论用这个了,我们用CSS来进行格式化。标签的话理论上什么都可以,但是为了所谓的“兼容性”,我们还是用<pre></pre>标签(也可以用<span></span>标签,但这样就得考虑换行的问题,也就是得用标签<br>,但是由于不同浏览器渲染页面有可能不同问题,这样并不保险,所以推荐用<pre></pre>)。我们需要为标签添加属性style="font-family: MS PGothic; font-size: medium; ",即<pre style="font-family: MS PGothic; font-size: medium; ">AA</pre>(替换掉“AA”)。

如下例,战场原黑仪,《化物语》:

                                 ____rf' ○ /
                           ,..f´ニミ::::::>'>_/
                           / 人>、.`く./:;/
                     ,rー<..._´ヽ.`フ"_:::::,'
                       /     \ V くヽ)/
                         /   `ー、 ! ト=イイ
                     /   ゝ-、 !、ト' /´
      r―――― ----- 、/   'ー―‐' ./
.       \.       / ̄ `/     ,'   /
         \   (   , '    ..ノ, --"     . . -―――-. .
             )   \/  ,  ̄/     ...:::´: : . .    . : : : :`:.ヽ、
         /     ` <  / }!  ..:::´    l      . : : : : : : ::::\
           /         `ヽ/ ..:::´:   / /,'i :!       : : : 、: : : : :::ヽ.
        /       、___/..::´; ./;   /_//イ .::|! i   : : : : :.\: : : : :::ヽ
.        く         >‐ー彡' //   //7 ,' ::ノj イ}   . : : : : :、 \: : : :::::.
.      /` ー――‐イ´   /  .,'/::!_ / ノ' ,ィf_广i7 /   ,イ .: : : :.ト、 \: : ::i
.      /        /'   /   ..:::::::: |‐ト{     !。j,、' /   /| . :、  i|'`ヽ. \::}
   /          ,'    / ,/ .:::::::::::::.Yニ、   ゛´...../  , '  | .: :|ヽ i!   }゙ ̄`
.  /         /.   i /.! :::;イ::::::::::.'iリノ    :::::/_.,/   | .: :} ,ハ| , ' . :.:,'
  /         イヽ    !' { :::| !::::::::::::iヽ     /´     .}  /rー-イ  . ::i
  \        ノ ./、     ',:::|∧:::::::ハ              ノ ノ/   ,'    : : |
   \        l  \     >{  〉:::::::::::.、 ヽ'         ´ .イ   ! ,'   . : :|
    .  \.      j   `  く. ` .:::::::::::::::::\           /     .i/  . : : |
.        ` 、          `ヽイ⌒ヽ.__\__            /   . : : :|
.           \       \    `ヽ. \    `ヽ ̄`)     /   : : : :.|
          >..、      \.     \.\     〉 ̄\.   /   , |: : : :|____
.           /: : ::::::\     \       `ヽ、 /    ヽ /   /i |` ̄` ̄ ̄ ̄/
.         /   : : ::::::`ヽ、    \        /      /   /ー!.|〉     /

如果不添加style属性直接<pre></pre>的话会是这种效果:

                                 ____rf' ○ /
                           ,..f´ニミ::::::>'>_/
                           / 人>、.`く./:;/
                     ,rー<..._´ヽ.`フ"_:::::,'
                       /     \ V くヽ)/
                         /   `ー、 ! ト=イイ
                     /   ゝ-、 !、ト' /´
      r―――― ----- 、/   'ー―‐' ./
.       \.       / ̄ `/     ,'   /
         \   (   , '    ..ノ, --"     . . -―――-. .
             )   \/  ,  ̄/     ...:::´: : . .    . : : : :`:.ヽ、
         /     ` <  / }!  ..:::´    l      . : : : : : : ::::\
           /         `ヽ/ ..:::´:   / /,'i :!       : : : 、: : : : :::ヽ.
        /       、___/..::´; ./;   /_//イ .::|! i   : : : : :.\: : : : :::ヽ
.        く         >‐ー彡' //   //7 ,' ::ノj イ}   . : : : : :、 \: : : :::::.
.      /` ー――‐イ´   /  .,'/::!_ / ノ' ,ィf_广i7 /   ,イ .: : : :.ト、 \: : ::i
.      /        /'   /   ..:::::::: |‐ト{     !。j,、' /   /| . :、  i|'`ヽ. \::}
   /          ,'    / ,/ .:::::::::::::.Yニ、   ゛´...../  , '  | .: :|ヽ i!   }゙ ̄`
.  /         /.   i /.! :::;イ::::::::::.'iリノ    :::::/_.,/   | .: :} ,ハ| , ' . :.:,'
  /         イヽ    !' { :::| !::::::::::::iヽ     /´     .}  /rー-イ  . ::i
  \        ノ ./、     ',:::|∧:::::::ハ              ノ ノ/   ,'    : : |
   \        l  \     >{  〉:::::::::::.、 ヽ'         ´ .イ   ! ,'   . : :|
    .  \.      j   `  く. ` .:::::::::::::::::\           /     .i/  . : : |
.        ` 、          `ヽイ⌒ヽ.__\__            /   . : : :|
.           \       \    `ヽ. \    `ヽ ̄`)     /   : : : :.|
          >..、      \.     \.\     〉 ̄\.   /   , |: : : :|____
.           /: : ::::::\     \       `ヽ、 /    ヽ /   /i |` ̄` ̄ ̄ ̄/
.         /   : : ::::::`ヽ、    \        /      /   /ー!.|〉     /

是不是差很多?

当然并不是所有地方都能随意使用HTML代码,如果你混论坛的话,可以试试UBB代码:[FONT=MS PGothic][SIZE=medium]AA[/SIZE][/FONT](替换掉“AA”)。当然我没有机会试遍所有的论坛系统,不敢保证一定有效。只要论坛能使用HTML代码最好还是用HTML。

当然,具体情况具体分析,比如网站行距设定比一般要大,为了对齐只有手动设定字体大小,把上面的medium替换为以pt(磅,一般字体大小单位,1pt=1/72英寸)甚至cm(厘米)、mm(毫米)、in(英寸)、pc(1pc=12pt)、px(像素)等结尾的数字就行了,如12pt10mm等。

最后来个大一点的战场原:

                                           //  //
                                          / // /
                                         / / /
                                     _,. = ニl o//
                                   / ( (つ / /
                                  , '-‐- 、∠_ /
                                 /  ー- 、 〉し)ノ
                                /  ー‐、/`7´
                      < ̄ ̄ ̄ 7ー-- /  `7 -' /
                       \   /   _/  _/ ___/   _,,,,........__
                          >  \/   /   _,.-''゙´  .   ` 丶、
                         /    \___/〉 _,.-'゙´   ,ィ  ::.      \
                       /        ∠ '´ /  /_l,. l :    ヽ.   丶
                      く___   `ー-ニ二/  /  /' ´_レ_ノハ  / :.   ヽ、 `、
                      /   ` ̄/´  / .:::L__/ 'ィ':r' リ/  /ヽ :::、 ト、 \_l
                    /      /  / ,イ.::::::::::L_  ゞ'´/  /  l ::l 〉  〉ー !‐-
                   /       /、   レ' |.::;:::::::::};タ   /_/   l :/__// , イ
                  ヽ、     _/ /     l::ハ:::::::{ヽ        j// / .:/ .:!
    /!                 \        l ヽ、  〉´::::::::::.、 ''     , '  l .:/ .:::|
    l/                     \    l  、` く _;: -、_::丶、    /   レ' .:::::|
    l\                   \       ヽ   `ヽ、\ ̄丶 -‐‐、   /  :::::::!
     \ヽ、                 >、    \    ヽ \ `「 ̄ \ /  /l、_」 -‐‐‐‐ァ
      \ \            _,.-'´  \    \      ヽ |     /  /l ト、   /
        \ `ー----------‐'''"´       \    \       |_______// l/`l レ'  /‐-、
         `ニ=‐---            .:::::::::\     \       / /l  |ヽ l l  く    丶
      _,.-‐''"´               .::::::::::::::::::::::\     \     / /く!  レ'-ヽヽ/n    !
    /           _,,. -‐‐   .:::::::::::::::::::::::::::::::::::`ー---..、 \   //   !  |  l /ヽ L!n  ヽ、
  /  _,,,..-‐‐ァ    /....................___:::::::::::::::::::::::::::::::::::::::::::::::::::::」 -┴ 〃ニニニ!  L__」   ヾ、ljヽ.  ヽ、
 /  /-‐ァ''"´   /::::::::::::::_,.-‐''´ /   .:::::::::::::::::::::::::_, rr‐'´   /リ    |  |  /       !   〉
 l /  /     / ̄ ̄ ̄´    /  .::::::::::::::::::::::::::::::|__ヾ三三/ `ヽ、    ヽ l O       /  /
 l/   /    /          /  .::::::::::::::::::::::::::::::::::::::::::::::::::::{     `ー-‐         /  /
     /   /           /  .::::::::::::::::::::::::::::::;::::::::::;:::::::::::::::!           i    r ´ , く´
     l  /           / .::::::::::::::::::::::::::::::::;イ:::::::/l:::::::::::::::::〉        O/    l  / 丶
     l /          / .:::::::::::::::::::::::::::::::://:::::/ l::::::::::::::/         /    / /::::::::::. \
     レ'          / .::::::::::::::::::::::::::::::::::/ /::∠rく ̄ ̄ ̄         /    / /::::::::::::::.  `、
              / .:::::::::::::::::::_,.-‐‐‐く_    「 ̄ヽヽ、         O_/__   /  |ヽ、:::::::::::.  !
            /  .:::::::_,.-''"´   _,,,.-ニ二ニ>'´ ̄\\   ________∠/ヽ |  |   |  ヽ;::::::::  |
           / ...::_,.-''"´   _,,.-''´     /   ____ゝ、ヽ_ /     _/  ヽ!  |   |   l:::::::::  l
         /.:::::::/⌒ヽ、_,,,..--く        / ̄ ̄  /`ー'´-‐‐'7´ /    〉  |  /  /::::::::::: /
赞赏

微信赞赏支付宝赞赏

no comment

reply

your email will keep secret. (* required).

you can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> .