「MSｺﾞｼｯｸ」以外の「等幅」&「字間＝行間＝0」のフォントを探してみたが、好みのフォントが無かったので自作に挑戦【前編】

15072 ワード
font 日本語 uml 等幅 エディタ font テキストリンク

第一章：探すきっかけ

　Windowsのメモ帳で、「MSゴシック」の罫線+記号文字を使ってアスキーアート風ＵＭＬを書きたい。しかし「MSゴシック」の記号文字は半角文字が多く、シックリ来ない。仕方がないので、他のフォントを探してみた

日本語等幅フォント調査

Font名 等幅？ メモ帳E:J=1:2 縦隙間 横隙間 Uni系新記号 実装
状況		 License 商用 再配布 備考
MS Gothic ○　 ○ ○ ○ 〇 W Microsoft × ×
IPA Gothic ○　 ○ △ ○ × D IPAﾌｫﾝﾄ 〇 〇
M+ 1M ○　 ? ? ? ? D M+ FONTS 〇 〇
Migu 1M ○　 ○ △ ○ × D IPAﾌｫﾝﾄ 〇 〇 M+改変
IPA
MigMix1M ○　 ○ × ○ × D IPAﾌｫﾝﾄ 〇 〇 M+
IPA
NSimSum ○　 ? ○ ○ ? W ? SimSun? 中国系?
consolas 仮名がP × ○ × × W ?
Courier New ○　 ? × × × W ?
Monospace821 仮名がP × × × × W ?
Note Mono 和英のみ等幅 × × × × × OFL google製
メイリオ 英がP 半角数:和=5:3 △ ○ ◎ W Microsoft ✕ ✕
  • 「仮名がP」の「P」→プロポーショナル・フォント
  • 実装状態「W」→Windowに実装済,「D」→要Download

フォント入手先

「MSｺﾞｼｯｸ」代替候補

  • 「メイリオ」が一瞬良いと思ったけど、半角英語がプロポーショナル・フォントで、半角数字と和文の比率が5：3なので除外。
  • 「MigMix 2M」は、半角ゼロ[0]の形状が「ドットゼロ」タイプで、[g]形状も個人的に好みじゃないので1Mを選択した。
  • 「IPAゴシック」「Migu 1M」「MigMix1M 」が代替候補として良さげ

フォントの画像比較

元のテキストデータ

┌───┐
│あいう│
│カキク│
│ｻｼｽｾｿﾀ│
│富士山│
│acdef│
│acdefg│
│ac12cd│
│ＡＢＣ│
│１２３│
│123456│
│7890\|│
│+-/*~^│
├───┼──┬──┬──┬
│①③④│⑩⑮│㉑㉛│㊶㊿│
│❶❸❺│⓯⓴│　　│　　│
├───┼──┼──┼──┴
│〇□△│◇☆│　◎│／＼
│●■▲│◆★│　　│＜＞
├─┬─┼──┼──┼──┴
│↑↓←│→⇔│⤴⤵│
│↖↗　　│◜◝　│◞◟│
├─┬─┼──┼──┼──┴
│⭰⭱⭲⭳│⭰⭱│⭲⭳│
│╚╦│╩╬│◸◹│◺◿
├─┬─┼──┼──┼──┴
│ⒶⒷⒸⒹⒺⒻ│Ⓚ　　│
├───┬
│ⓐⓑⓒ│ⓚ　│
├─┼─┼──┼────┼
│◢◢│◣◤│▐　│⇒↔↰⿰↖│
└─┼─┴──┼────┼

メモ帳を画面キャプチャー（IPA　ゴシック）

メモ帳を画面キャプチャー（Migu 1M）

メモ帳を画面キャプチャー（MigMix1M）

縦の罫線間隔が離れ気味。

フォントを探して思った事 →結論：自分で新フォントを作る

  • 「MSｺﾞｼｯｸ」代替候補として「IPAゴシック」「Migu 1M」「MigMix1M 」を挙げたが、本来の目的の【文字でＵＭＬ】が書けない！
  • どうしたら「文字でＵＭＬ」が書ける？
    • 記号文字サイズは全角で統一して欲しい。
    • 「⭰」「⭱」「⭲」「⭳」等の矢印記号は全角文字であって欲しい。
    • 罫線は連続であって欲しい。鎖線はいや。
    • 矢印と罫線連続でつなげたい
  • 世間に求める日本語等幅フォントが無いのなら、自分でフォントを作るしかない！

第二章：フォント作成

欲しいフォント条件

  • 英数字、仮名と漢字と記号が全て等幅フォント
  • 罫線が鎖線にならず連続
  • 半角英数：全角文字＝1:2
  • 全角文字の縦横比＝1:1
  • 記号文字も全角等幅
  • 文字サイズ均一
  • ライセンス・フリー（改変可・商業・再配布可）

「字間＝行間＝0」のイメージ

用意するもの/したいもの (無料)

  • メモ帳
  • FontForge
  • Visual studio code
  • Inkscape（必要に応じて）
  • Fusion360（条件付で無料。あればうれしい）
  • フォントのデータ
    • 「IPAゴシック」
    • 「Migu 1M」
    • 「MigMix1M 」

用意するもの/したいもの (有料)

  • 秀丸エディタ（あれば便利）
  • AutoCAD　　（あればうれしい）

フォントについての予備知識メモ

フォントのフォーマット一覧

Font
フォーマット		 拡張子 マルチ
拡張子		 制作企業
・団体		 開発
初年		 仕様と構成 備考
PostScriptフォント .pfb - Adobe 1984
TrueType .ttf .ttc Apple 1990
OpenType .ttf .ttc Microsoft
Adobe		 1996 TrueType形式
TueType後継規格
OpenType .otf .ttc
.otc		 Microsoft
Adobe		 1996 PostScript形式
PostScript後継規格
OpenType-SVG ? - Adobe 2017 OpenType+SVG Photoshop CC 2017
でサポート
Web Open Font Format .woff - W3C 2009 (TrueType or OpenType)
+圧縮		 Web向け
SVG Font .svg
.svgz		 - W3C 2001 ブラウザではほぼ
使えない　

フォントの定義

↓勉強させてもらいました
http://w3.kcua.ac.jp/~fujiwara/infosci/font.html

FontForgeメモ

  • 元々Linux向けのソフトなので、Windowsですと不安定
  • FontForge用のファイル形式は「※※※.sfd」
  • 「FontForge スクリプト」があるらしいが、よく知らない。
  • 行間&行高に関する定義（Ascent,Descent）は、SVGフォント内をエディタで編集してみました駄目だった。FontForge側で編集するようです。
  • この行間&行高はメニューの「エレメント」→「フォント情報」→「OS/2」で設定

SVGフォントについて

　↓勉強させてもらいました
http://defghi1977.html.xdomain.jp/tech/svgMemo/svgMemo_16.htm

フォント修正方法

　全てのフォントを作り直すのは大変なので、ベースとなるフォントのデータをダウンロードした後、特定のフォントを修正していく。修正方法は、以下２通りがあると思う。①と②を織り交ぜながら修正作業。
　①一度SVGフォントに変換して、テキストエディタで修正して、再変換
　②FontForgeで修正

①のフォント修正手順

　1. フォントのデータをダウンロード
　2. FontForgeで変換：ttf　→　SVG
　3. SVGフォントを修正
　4. FontForgeで変換：SVG　→　ttf
　5. ttfのフォントをWindowsにインストール

②のフォント修正手順

　1. フォントのデータをダウンロード
　2. FontForgeで読み込み
　3. 修正（こまめに保存）
　4. FontForgeで変換：　→　ttf
　5. ttfのフォントをWindowsにインストール

参照させていただいたサイト

第三章：実践

【後編】につづく

　https://qiita.com/good_kobe/items/e946eb5d8856ace3af1d