カラクリサイクル

『輝かしい青春』なんて無かった人の雑記

非Windows環境で、AAをずれずに表示する方法

概要: @font-faceでMS P GothicをMonapoに置換する


超個人的メモ。

前提

Linuxとか、Macとかの非Windows環境では、2chとかでよく使われるアスキーアートがずれる。 で、WindowsメインはAA使用サイトとかでは、フォントの指定にMS P Gothicを使ってたりする。

で、今回は、これをずれないようにしたい。

方法の概要

CSS3(だっけ?)の@font-faceを使って、MS P Gothicに指定されているフォントの指定を置換する。

事前準備

今回は、AA対応フォントとして、

を使います。なので、各自Monapoをインスコすること。

あと、この後書く方法は、他のフォントでも応用可なので、 自分の好みAA対応フォントを使うことも可能

実際のユーザースタイルシート

ざっとこんな感じ。ちなみに下記はGoogle ChromeのStylishで使用しているもの。 多分だけど、他のCSS3をサポートしていて、かつユーザースタイルシートが使えるものだったら、 このスタイルシートが利用できると思う。

@charset "UTF-8";

@font-face {
    font-family: "MS Pゴシック";
    src: local("Monapo");
}

@font-face {
    font-family: "MS PGothic";
    src: local("Monapo");
}

解説とか詳細

何をやってるか、っていうと、このスタイルシートでは、

  1. MS P Gothicというフォント名をフォントの指定に使った場合に
  2. Monapoというフォントを使う

という設定を行っています。

まあ、あれだ、@font-faceについては詳しくないので、 このプロパティに関する詳細は各自検索してください。

あと、@charset "UTF-8"とありますが、これはフォント名の指定の部分に、日本語を使っている為、 必要となります。なおエンコーディングについては各自の環境に合わせてください。

それと、今回は置換先のフォント名にMonapoを指定していますが、 もし他のフォントを使いたい場合には、その使いたいフォントのフォント名をMonapoの代わりに使えば、 多分OKだと思います。

以上

メモは終わり。