Palm84 某所の日記

死のうは一定、しのびクマには何しよぞ...

【AA】アスキーアート表示について【フォント】

     \   ∩─ー、    ====
       \/ ● 、_ `ヽ   ======
       / \( ●  ● |つ
       |   X_入__ノ   ミ   そんな餌で俺様が釣られクマ――
         、 (_/   ノ /⌒l
        /\___ノ゙_/  /  =====
        〈         __ノ  ====
        \ \_    \
         \___)     \   ======   (´⌒
            \   ___ \__  (´⌒;;(´⌒;;
              \___)___)(´;;⌒  (´⌒;;  ズザザザ
2019.3.16 追記

すみません、このページはスマホには対応してません...(;'∀')

下記のWebフォントの設定がPC向けも含め最適ではないかとと考えてます。

Windows 以外でも対応フォントを入れればズレない表示が可能ですけど、Monapo, Textar とかあんまり知られてないような気がしないでもないように思ったり思わなかったりするので書いてみた。

【2017.5.4 追記】関連めも

RobotoJAA を追加とかしてます。

AAがズレないフォントを入れる(閲覧者側)

こんなとこかな。

  • IPA モナー Pゴシック
  • Monapo
  • Mona
  • 梅Pゴシック
  • Textar

Debian/Ubuntu 系では下記3点は apt でインストール可能でした。

  • Monapo - fonts-monapo
  • Mona - fonts-mona
  • 梅フォント - fonts-horai-umefont
ダウンロード

CSSの書き方(HTML作成者側)

Wikipedia ではこんなかんじ。

font-family:IPAMonaPGothic,'IPA モナー Pゴシック',Monapo,Mona,'MS PGothic','MS Pゴシック',sans-serif;
font-size:16px;
line-height:18px;

愚見かもですけど、梅PゴシックTextar を追加して、順番変えた方がいいかも。

font-family: 'MS Pゴシック','MS PGothic',Monapo,'IPA モナー Pゴシック',IPAMonaPGothic,Mona,'梅Pゴシック',Textar,sans-serif;

はてなダイアリーではこんなん。

div.ascii-art{
  font-size:12pt;
  line-height:18px;
  font-family: "Mona","IPA MONAPGOTHIC","MS PGothic","MS Pゴシック","MS Pゴシック","MS Pゴシック",sans-serif;
}

私はこんなかんじにしてます(※ 2018.12.30 訂正しました。)

.kuma {
font-size: 1em;
line-height: 1.1 !important;
font-family: 'MS Pゴシック','MS PGothic',Monapo,'IPA モナー Pゴシック',IPAMonaPGothic,Mona,RobotoJAA,'梅Pゴシック',Textar,sans-serif;
margin: 1em;
padding: 0.5em;
_padding-bottom: 1em;
border: dotted 2px #c7dce3 !important;
overflow: auto;
}
 / ̄ ̄ ̄ ̄ ̄\
 |  マイヤヒー♪ |           / ̄ ̄ ̄ ̄ ̄\
 \___   __/          |  マイヤフー♪ | / ̄ ̄ ̄ ̄ ̄\
      ∨               \___   __/ |  マイヤホー♪ |
                            ∨       \__   ____/
    ∩___∩              ∩____∩      ∨
    | ノ     ヽ            /       ヽ|  ∩____∩
   /  ●   ● |            | ●   ●  ヽ /      ヽ|
   |    ( _●_)  ミ         彡   (_●_ )     | ●   ●  ヽ
  彡、   |∪|  、`\        /     |∪|    彡  (_●_)    |
 / __  ヽノ /´>  )      (  <   ヽ ノ   /    |∪|    ミ
 (___)   / (_/         \_ )      (  <   ヽ ノ     ヽ

マイほなー