macOS のターミナルで M+ BITMAP FONTS を使う

Retina 全盛の今、フォントの話といえば当たり前のようにアウトラインフォントのこととなり、ビットマップフォントの話題が登らなくなって久しい。ただ、私のメイン環境のディスプレイは非Retinaなので、久しぶりにM+ BITMAP FONTS を使ってみたら限定的な使い方で良い感じだったので設定等の覚え書き。

![スクリーンショット 2020-04-13 10.14.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5330/7a6f7e55-b48c-0fe0-4a58-3b83a04dc1ed.png)

## 限定的な使い方で便利

普段使っている Terminal やエディタでは、そこそこフォントサイズが大きい(16pxぐらい) Menlo でアンチエイリアスありで表示している。ただ、情報を俯瞰したい、ログを流しっぱなしにしたい、などのときは別ウィンドウでアンチエイリアスありの小さいフォントサイズで表示していた。

例えば top コマンドででプロセスの状態を表示しておきたいときや、`jest test:watch` などでファイルに変更があったらテストが実行される結果をずっと表示しておきたい、などのとき、画面上のどこか見える場所に置いておくと便利だ。

そんなときは小さなフォントサイズで表示するのだけど、アンチエイリアスフォントだと(とりわけ非レティナ環境では)文字が小さいと視認性が悪くなり、あまり小さなサイズにすることができない。

しかしながら、M+ BITMAP FONTS では 10px という小さなフォントサイズでも視認性が高い状態で表示することができ、小さな Terminal で情報を流す時に便利で、最近多用するようになった。

(topの表示例・Retinaだと画像が倍で表示されて汚いが、非Retinaな画面で見ると綺麗なはず)

![スクリーンショット 2020-04-13 10.29.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5330/44f35447-31a6-f3ce-9c4a-07dd57bcd2eb.png)

(parcel の build を流し続ける)

![スクリーンショット 2020-04-13 10.42.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5330/3379294a-dff1-919d-51e2-3431a6a29d0c.png)



# M+ BITMAP FONTS の TTF の一つ、 PixelMplus フォントのダウンロード

M+ BITMAP FONTSはオフィシャルサイトからダウンロードできる、ありとあらゆる改変が商用・非商用に限らず文字通りフリーなフォントである。

- https://mplus-fonts.osdn.jp/mplus-bitmap-fonts/

ただ、配布形式のフォーマットではそのままでは Mac で使うことができないため、M+ BITMAP FONTS をアウトライン化したフォントの、PixelMplus を利用する。

- http://itouhiro.hatenablog.com/entry/20130602/font
- http://sourceforge.jp/projects/mix-mplus-ipa/downloads/58930/PixelMplus-20130602.zip/

このフォントは PixelMplus10 と PixelMplus12 の２つのTrueType等幅フォントが含まれており、各々元にした M+ BITMAP FONTS フォントサイズが異なる。PixelMplusの良いところは、PixelMplus10なら10pxで非アンチエイリアスのレンダリングすると、M+ BITMAP と同等のピクセル(= 視認性が高いビットマップフォント)でレンダリングされるし、それ以外のサイズでも表示が可能(10pxや12pxがもちろん一番美しいのだけど)なことだ。

これらのフォントをダウンロードしインストールする。

# Terminal.app の設定

Terminal.app の設定は、少なくとも Catalina では簡単だ。フォントに PixelMplus12 (かPixelMplus10) を選び、フォントサイズは 12pt (か10pt) を選んで、Textの設定項目の「
テキストをアンチエイリアス処理」を切れば OK。

# Hyper.app の設定

Terminal.app はメインの作業に基本使っているので、私は小さいフォントサイズで情報を表示するときには [Hyper.app](https://hyper.is/) というターミナルを別途利用することで、使い分けをしている。

Hyper.app は設定の `~/.hyper.js` (起動時に作られるはず) の fontFamily と fontSize を設定する。

```
// default font size in pixels for all tabs
fontSize: "10",

// font family with optional fallbacks
fontFamily: '"PixelMplus10", Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',
```

ただ、Hyper.app はサブピクセルスムージングの影響で、環境によってアンチエイリアスが、例えば上記設定の10pxでもかかってしまい綺麗に表示されない時がある。その時は

```
defaults write co.zeit.hyper CGFontRenderingFontSmoothingDisabled -bool YES;
defaults write co.zeit.hyper.helper CGFontRenderingFontSmoothingDisabled -bool YES;
defaults write co.zeit.hyper.helper.EH CGFontRenderingFontSmoothingDisabled -bool YES;
defaults write co.zeit.hyper.helper.NP CGFontRenderingFontSmoothingDisabled -bool YES;
```

として CGFontRenderingFontSmoothingDisabled の設定を有効化して Hyper を立ち上げ直す。なおこの設定で Retina でレンダリングするとき Hyper が汚くなる場合は無効化で元に戻せる。

```
defaults write co.zeit.hyper CGFontRenderingFontSmoothingDisabled -bool NO;
defaults write co.zeit.hyper.helper CGFontRenderingFontSmoothingDisabled -bool NO;
defaults write co.zeit.hyper.helper.EH CGFontRenderingFontSmoothingDisabled -bool NO;
defaults write co.zeit.hyper.helper.NP CGFontRenderingFontSmoothingDisabled -bool NO;
```