CSS
アスキーアート
Webフォント
AsciiArt
Shift_JISArt

モナー等のAAをずれずに表示するためのWebフォント設定

この記事はアスキーアート関連アドベントカレンダーの1日目の記事です。

今日はモナー等の日本語フォントのアスキーアート(以下、AA)をずれずに表示するWebフォントについての記事です。

※英語だとShift-JIS Art(sjis art)と呼ばれるようです。

AAを表示する問題

Shift-JIS Artの名の通り、AAの表示は日本語フォント、特にMSPゴシックが必要です。というわけで、そのフォントがない環境だと下のようにずれます。
  ∧_∧
 ( ´∀`)
 (    )
 | | |
 (__)_)

この対策として一昔前はOSにIPAモナーゴシック等のAA表示用のフォントをインストールし、ブラウザでそのフォントを設定するなどが必要でした。しかし、この方法はユーザーの負担が大きいので現実的な方法じゃないです。

対策:Webフォントを使う

Webフォントはコンテンツ提供側がフォントファイルを配信して、サイト側が意図するフォントで表示させる機能です。
日本語フォントは通常のフォントに比べてサイズがでかくて配信に不向きでしたが、woff2など圧縮率の高い形式がでてきたので実用的に使えるようになりました。

実装は簡単

以下のCSSをコピー&ペーストして貼り付けましょう。

@font-face {
  font-family: "aahub_light";
  src: url("https://fonts-aahub.netlify.com/assets/fonts/aahub_light/aahub_light.woff2") format("woff2"),
    url("https://fonts-aahub.netlify.com/assets/fonts/aahub_light/aahub_light.woff") format("woff"),
    url("https://fonts-aahub.netlify.com/assets/fonts/aahub_light/aahub_light.ttf") format("ttf");
  font-display: swap;
}

.aahub_light {
  font-family: "aahub_light";
  white-space: pre;
  font-size: 16px;
  line-height: 16px;
}

そして、AAを表示するdivタグにaahub_lightクラスを付与すればOKです。

<div class="aahub_light">
  ∧_∧
 ( ´∀`)
 (    )
 | | |
 (__)_)
</div>

※aahub_lightは超軽量(約56kB)AA表示用フォントです。

その他Webフォント

手前味噌ですが、AA表示用Webフォントを以下のサイトにまとめています。簡単に使えるCSS付きですので興味がある方は使ってみてください。質問、issueはGitHubで受け付けてます。

AAHub Fonts
GitHub
※Ionic4 PWA Toolkitで作ってあります

Screen Shot 2018-11-30 at 23.47.46.png

それでは