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

　　　　　＼　　　∩─ｰ､ 　　　====
　　　　　　 ＼／　●　､_ ｀ヽ 　　======
　　　　　　　/ ＼(　●　 ● |つ
　　　　　　　|　　 X_入__ノ 　 ミ　　　そんな餌で俺様が釣られクマ――
　　　　　 　　 ､　(＿／　　　ノ　/⌒l
　　　　　　　 /＼＿＿＿ノﾞ＿/　 /　　=====
　　　　　　　　〈　　　　　　　　 ＿_ノ　　====
　　　　　　　 ＼　＼＿　　　　＼
　　　　　　　　　＼＿__）　　　　　＼　　　======　　　(´⌒
　　　　　　　　　　　　＼　　 ＿＿_ ＼＿＿　　(´⌒;;(´⌒;;
　　　　　　　　　　　　　 ＼＿＿＿）＿＿＿）(´;;⌒　 (´⌒;;　　ズザザザ

2019.3.16 追記

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

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

• モナー等のAAをずれずに表示するためのWebフォント設定 - Qiita
• 拙作めも :
  • はてなブログでスマホでのAA（アスキーアート）表示のためにWebフォントを設定

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

• アスキーアート - Wikipedia

【2017.5.4 追記】関連めも

• 【AA】アスキーアート表示対応フォントの表示テスト

RobotoJAA を追加とかしてます。

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

こんなとこかな。

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

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

• Monapo - fonts-monapo
• Mona - fonts-mona
• 梅フォント - fonts-horai-umefont

ダウンロード

• IPAモナーフォント
• Monapo - modified_fonts_01
• Mona Font, a Japanese font for text arts | Get Mona Font, a Japanese font for text arts at SourceForge.net
• Ume-font プロジェクト日本語トップページ - SourceForge.JP
• Textar Font - アスキーアート対応ウェブフォント
  • Textar - Google Code Archive - Long-term storage for Google Code Project Hosting.

CSSの書き方（HTML作成者側）

Wikipedia ではこんなかんじ。

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

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

font-family: 'ＭＳ Ｐゴシック','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ゴシック",sans-serif;
}

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

.kuma {
font-size: 1em;
line-height: 1.1 !important;
font-family: 'ＭＳ Ｐゴシック','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;
}

　／￣￣￣￣￣＼
　|　 マイヤヒー♪ |　　　　　　 　 　 ／￣￣￣￣￣＼
　＼＿＿_ 　 ＿_／　　　　　　　　　 |　 マイヤフー♪ |　／￣￣￣￣￣＼
　　　　　　∨　　　　　　　　　　 　 　 ＼＿＿_ 　 ＿_／　|　 マイヤホー♪ |
　　　　　　　　　　　　　　　　　　　　　 　 　 　 ∨ 　 　 　 ＼＿_ 　 ＿＿__／
　　　 ∩＿＿＿∩ 　　　　　　　　　　　　 ∩＿＿＿_∩　 　 　 ∨
　　　 | ノ　　　　　ヽ 　　　　　　　　　　　/　　　　　　 ヽ| 　∩＿＿＿_∩
　　　/　 ●　　　● |　 　　　　　　　　　 | ●　　　●　 ヽ /　　　　　　ヽ|
　　 |　　　　( _●_)　 ミ　　　　　　　　 彡 　 (_●_ ) 　 　 | ●　　　●　 ヽ
　　彡､　　　|∪|　　､｀＼　　　　　 　 ／ 　 　 |∪| 　　 彡　 (_●_)　　　 |
　/　＿＿　 ヽノ　/´>　 )　　　　　　（　 <　　 ヽ ﾉ 　 ／ 　　 |∪|　　　　ミ
　(＿＿＿）　　　/　(_／　　　　 　 　 ＼_ )　　　　 　（ 　< 　 ヽ ﾉ　　　　 ヽ

マイほなー