オールトの雲

[文字] 等幅フォント考 2020

2020年8月19日

　いつも困る等幅フォント問題。とりあえず現時点の状況を確認してみました。

　検証対象は Windows 10 ver 1809, macOS 10.15 Catalina, Android 8, iPad OS 13 で、ブラウザはいずれも Google Chrome（Version 84 前後）です。

和文
　ここでいう和文とは、主に過去 ShiftJIS を構成していた JIS X 0201 と JIS X 0208 のコードポイントの集合を指します。したがって、それらコードに含まれる英数字および記号類も和文の範囲です。
1. Windows
  　Windows の場合、最近だと 'biz UDGothic' が標準で搭載されています。それ以前だと 'MS Gothic' が定番です。serif 系の 'biz UDMincho', 'MS Mincho' もあります。
  　いわゆる、JIS X 0208 の範囲は全角幅です。Unicode で追加されたラテン拡張領域の文字などは半角幅になります。
  　罫線は全角 (半角 2 文字) 単位です。
```
font-family: 'biz UDGothic', 'MS Gothic', Monospace;
+-+-+-+-+-+-+-+-+-+
|a|1|ĳ|ǽ|ʤ|×|α|∫|○|
+-+-+-+-+-+-+-+-+-+
┌─┬─┬─┬─┬─┐
│△│漢│字│か│な│
│ｶﾅ│Ai│01│£ĳ│ǽʤ│
└─┴─┴─┴─┴─┘
```
  　表示例（Windows）
2. macOS
  　macOS の場合、'Osaka-Mono' 一択です。（多分）
  　'MS Gothic' 等と同じく「全角文字 = 半角 2 文字」です。
  　ただ、ラテン拡張の文字、および発音記号（IPA 拡張文字）は Menlo やヒラギノなどにフォールバックするので等幅ではなくなります。
```
font-family: 'Osaka-Mono', Monospace;
+-+-+-+-+-+-+-+-+-+
|a|1|ĳ|ǽ|ʤ|×|α|∫|○|
+-+-+-+-+-+-+-+-+-+
┌─┬─┬─┬─┬─┐
│△│漢│字│か│な│
│ｶﾅ│Ai│01│£ĳ│ǽʤ│
└─┴─┴─┴─┴─┘
```
  　表示例（macOS）
3. Android / iOS (iPadOS)
  　Android と iOS は和文の等幅フォントをもっていないので、和文の等幅表示はできません。（多分）
```
font-family: Monospace;
+-+-+-+-+-+-+-+-+-+
|a|1|ĳ|ǽ|ʤ|×|α|∫|○|
+-+-+-+-+-+-+-+-+-+
┌─┬─┬─┬─┬─┐
│△│漢│字│か│な│
│ｶﾅ│Ai│01│£ĳ│ǽʤ│
└─┴─┴─┴─┴─┘
```
  　表示例（Android）　表示例（iPadOS）
4. Web Font
  　結局のところ、等幅フォントを使いたい場合に OS 搭載フォントだけで勝負する、というのは 2020 年現在はほぼ無理筋です。
  　そうすると Web Font に頼らざるをえないのですが、和文フォントのファイルサイズは MB 単位になるため、わずかな表示のためにこのファイルサイズを運用するのは現実的でありません。ページで使用する文字のグリフのみが登録されたフォントファイルを作ってファイルサイズを減らす方法もありますが、個人 blog でわざわざそこまで頑張るのも現実的ではありません（汗
  
  　そこで Illusion という補助フォントを使うと便利です。3 書体あり、それぞれファイルサイズは 60 KB 程度で軽量です。
  　このフォントはかなや漢字は持っていないので、OS 搭載のフォントと組み合わせて使います。
  
  　以下は 'Illusion-N-Regular' を使った例で、記号や罫線を半角幅で表示します。
```
font-family: 'Illusion-N-Regular', 'biz UDGothic', 'Osaka-Mono', 'MS Gothic', Monospace;
+-+-+-+-+-+-+-+-+-+
|a|1|ĳ|ǽ|ʤ|×|α|∫|○|
+-+-+-+-+-+-+-+-+-+
┌─┬─┬─┬─┬─┐
│△│漢│字│か│な│
│ｶﾅ│Ai│01│£ĳ│ǽʤ│
└─┴─┴─┴─┴─┘
```
  　表示例（Windows）　表示例（macOS）　表示例（Android）　表示例（iPadOS）
  
  　以下は 'Illusion-Z-Regular' を使った例で、記号や罫線を全角幅で表示します。
```
font-family: 'Illusion-Z-Regular', 'biz UDGothic', 'Osaka-Mono', 'MS Gothic', Monospace;
+-+-+-+-+-+-+-+-+-+
|a|1|ĳ|ǽ|ʤ|×|α|∫|○|
+-+-+-+-+-+-+-+-+-+
┌─┬─┬─┬─┬─┐
│△│漢│字│か│な│
│ｶﾅ│Ai│01│£ĳ│ǽʤ│
└─┴─┴─┴─┴─┘
```
  　表示例（Windows）　表示例（macOS）　表示例（Android）　表示例（iPadOS）
  
  　Windows は 'biz UDGothic' または 'MS Gothic' 単体でも等幅表示が維持できますが、このフォントと組み合わせても等幅表示が維持できます。
  　macOS の場合は組み合わせる 'Osaka-Mono' がラテン拡張のグリフを持っていないので等幅表示でなくなります。Android と iOS も同様に Illusion が持つ文字以外の欧文の文字は等幅表示でなくなります。しかし和文領域（JIS X 0201 + JIS X 0208）の範囲では等幅表示が維持できます。
欧文
　ここでいう欧文とは、Unicode の基本多言語面（BMP）において、ラテン文字, ギリシャ文字, 記号類を主とする欧州圏の文字集合を指します。絵文字（✉など）や非欧州圏（アジア圏等）のアラビア文字やヘブライ文字は、ここでは含みません。
1. Windows / macOS / Android / iOS (iPadOS) 共通
  　欧文フォントの場合、serif であることが許容できれば 'Courier New' が無難かと思います。
  　sans-serif だと Windows は 'Consolas', macOS と iOS は 'Menlo', Android は monospace みたいな感じで面倒です。
  　罫線は英字 1 文字単位ですが、和文（全角文字）は混ぜられません。
```
font-family: 'Courier New', Monospace;
+-+-+-+-+-+-+-+-+-+
|a|1|ĳ|ǽ|ʤ|×|α|∫|○|
+-+-+-+-+-+-+-+-+-+
┌─┬─┬─┬─┬─┐
│△│漢│字│か│な│
│ｶﾅ│Ai│01│£ĳ│ǽʤ│
└─┴─┴─┴─┴─┘
```
  　表示例（Windows）　表示例（macOS）　表示例（Android）　表示例（iPadOS）
```
font-family: 'Consolas', 'Menlo', Monospace;
+-+-+-+-+-+-+-+-+-+
|a|1|ĳ|ǽ|ʤ|×|α|∫|○|
+-+-+-+-+-+-+-+-+-+
┌─┬─┬─┬─┬─┐
│△│漢│字│か│な│
│ｶﾅ│Ai│01│£ĳ│ǽʤ│
└─┴─┴─┴─┴─┘
```
  　表示例（Windows）　表示例（macOS）　表示例（Android）　表示例（iPadOS）
  
  　また、Android に至っては欧文等幅フォントも十分なグリフを持っていません。たとえば 'Courier New' で割り当たるフォント（Serif-Monospace / 'Cutive Mono'）は '○'（記号類）や 'α'（ギリシャ文字）などのグリフを持っていません。Monospace で割り当たる 'Roboto Mono'）は 'α' や 'ǽ'（ラテン拡張）はありますが '○' はやはり持っていないので記号類は和文フォントの文字が表示されたりします。
2. Web Font
  　罫線や記号類を混ぜたい場合、Android では対応するグリフがないので web font に頼るほか方法がありません。（多分）
  　ここでは DejaVuLGCSansMono というフォントを使ってみました。
  　フォントのファイルサイズはおよそ 170 KB とそこそこ大きいのですが、大きめの画像程度だと思えば運用できないファイルサイズではないと思います。
```
font-family: 'DejaVuLGCSansMono';
+-+-+-+-+-+-+-+-+-+
|a|1|ĳ|ǽ|ʤ|×|α|∫|○|
+-+-+-+-+-+-+-+-+-+
┌─┬─┬─┬─┬─┐
│△│漢│字│か│な│
│ｶﾅ│Ai│01│£ĳ│ǽʤ│
└─┴─┴─┴─┴─┘
```
  　表示例（Windows）　表示例（macOS）　表示例（Android）　表示例（iPadOS）
  
  　上記ではわかりにくいですが、欧文だけなら罫線もズレません。
```
┌─┬─┬─┬─┬─┬─┬─┬─┬─┬─┐
|a|1|ĳ|ǽ|ʤ|×|α|∫|○|£|
└─┴─┴─┴─┴─┴─┴─┴─┴─┴─┘
```