コーディング用フォント / font
kzk4043Source Han Code JPを使っていたのだが、マークダウンにおいてテーブルの整形がずれているのはフォントのせいだということに気づく
Source Han Code JPの場合
Ricty Diminishedの場合
見づらい。この辺が理由と思われる
他の等幅フォントと異なる点は全角文字の文字幅です。半角2文字に対して全角1文字が一般的なので、Source Han Code JPの半角3文字に対して全角2文字ー中略ーこの点はコードの末尾を揃える嗜好のあるプログラマにとっては好き嫌いが分かれると思います。
むむむ。linterに何か設定すればいけるのか…？
当初結構いろいろ調べてSource Han Code JPにした記憶があるが、再考の必要あり？Firaに移行する時がきてしまったのか…
kzk4043kzk4043日本語対応の等幅フォントについて調べますね。日本語対応の等幅フォントについて調べました。プログラミングやコンソール作業に適したフォントを中心にまとめます。
## 主要な日本語対応等幅フォント
### 人気の高いフォント
**HackGen（白源）**
- 欧文フォント「Hack」と「源ノ角ゴシック」の派生フォント「源柔ゴシック」を合成
- 視認性向上のための調整が施されている
**PlemolJP（プレモル ジェイピー）**
- IBM Plex MonoとIBM Plex Sans JPをベースに開発、読みやすさ・可読性を重視
- 半角:全角 = 1:2の比率
**Source Han Code JP（源ノ角ゴシック Code JP）**
- 欧文フォント「Source Code Pro」に和文フォント「源ノ角ゴシック」を加えたもの
- 半角:全角 = 2:3の比率（特徴的）
**Noto Sans Mono CJK JP**
- Googleが開発したフォントで、「No Tofu」（豆腐文字=文字化け時の四角）が由来
- 半角:全角 = 1:2の比率
**NOTONO**
- 等幅の欧文フォント「Noto Sans Mono」と日本語フォント「Noto Sans Japanese」を合成
**Cascadia Next**
- マイクロソフトが作成、日本語・簡体字中国語・繁体字中国語に対応、現在プレリリース版
### 幅の比率について重要なポイント
半角:全角の幅の比が 1:2 のフォントと 2:3 のフォント（Source Han Code JPなど）があり、レガシーな日本語テキストエディタとの表示レイアウトに相違が生じる場合がある
タブ文字で列を揃える場合は、半角:全角 = 1:2 のフォントが推奨されます。
### その他の選択肢
- Ricty Diminished（※2023年時点で更新停止中）
- M+ FONTS
- Explex
- Cica
フォント選びの際は、用途（プログラミング、ターミナル作業など）や、使用するエディタ・環境に合わせて、幅の比率や視認性を確認するのが良いでしょう。
VS CodeでNoto Sans Monoを使う手順を説明しますね。VS CodeでNoto Sans Monoを使う手順を説明します。
1. フォントのダウンロード
Google Fontsでは非公開になりましたが、GoogleのNoto Sans CJKのGithubリポジトリからダウンロードできます
GitHubからダウンロード:
- https://github.com/notofonts/noto-cjk/tree/main/Sans にアクセス
-
OTF/Japaneseフォルダを開く -
Noto Sans Mono CJK JP のファイルをダウンロード:
NotoSansMonoCJKjp-Regular.otfNotoSansMonoCJKjp-Bold.otf
2. フォントのインストール
Windows:
- ダウンロードした
.otfファイルをダブルクリック - 「インストール」ボタンをクリック
Mac:
- ダウンロードした
.otfファイルをダブルクリック - Font Bookが開くので「インストール」をクリック
または、Homebrewを使う場合:
brew tap homebrew/cask-fonts
brew install font-noto-sans-cjk-jp
3. VS Codeの設定
VS Codeを開いて設定を変更します:
方法1: 設定画面から
-
Ctrl + ,(Mac:Cmd + ,) で設定を開く - 「フォント」で検索
-
Editor: Font Familyの欄に以下を入力:'Noto Sans Mono CJK JP', monospace
方法2: settings.jsonから
-
Ctrl + Shift + P(Mac:Cmd + Shift + P) でコマンドパレットを開く - 「Preferences: Open Settings (JSON)」を選択
- 以下を追加:
{ "editor.fontFamily": "'Noto Sans Mono CJK JP', monospace", "editor.fontSize": 14 }
4. VS Codeを再起動
VS Codeを起動している状態でフォントをインストールした場合は、VS Codeを再起動しないとフォントが反映されません
完全に終了してから再起動してください(ウィンドウの再読み込みではなく)。
おすすめの代替案:
Noto Sans をコーディングで使いたい場合は、NOTONOTOというフォントがおすすめです
NOTONOTOは、Noto Sans MonoとNoto Sans JPを合成したプログラミング向けフォントで、日本語環境により最適化されています。
いいかも
kzk4043
kzk4043Ricty Diminished/Source Han Code JP/FiraCodeあたりはやはり定番
Myricaちょっと気になる
kzk4043firaいれてみるか…
最新版ダウンロードして、
- ttfフォルダ内.ttfファイルを全選択
- open by font book
- install
VSCodeに"Fira Code"で追加
あれ、ずれとるやん笑
うわ、これ、Source Han Code JPと同じ感じなのかもしかして
kzk4043
ちょっとずれるけどこういうのもあるんだ笑
kzk4043
この記事助かる。Myricaってのやっぱ結構出てくる。MyricaMがいいのかな。
Ricty Diminished ※ 2023年現在 推奨できません。合成元フォントのバージョンアップへの追従、不具合の修正が停止（終了）しています。
む
kzk4043
多くの特徴をプログラミング用フォント Ricty から継承しています。
なるほ。rictyとまっちゃったからその後継的な？
MyricaM M
等幅フォントです。プログラミング用に作成しました。
MyricaM P
なんちゃってプロポーショナルフォントです。
グリフは、全角かな文字:90%、その他の全角文字:95% に縮小し、文字の左右スペースを削り、プロポーショナル文字っぽく作成しました。
ただし、数字(0-9)は幅固定しています。
MyricaM N
幅を狭くしたフォントです。一定幅で多くの文字を表示できるように作成しました。
グリフは、半角文字:68%、全角かな文字:55%、その他の全角文字:60% に縮小し、文字の左右スペースを削り、プロポーショナル文字っぽく作成しました。
ただし、数字(0-9)は幅固定しています。
とりあえずM入れてみる
ぬ…なんか適用されてない…？
あ、「MyricaM M」なんだ…
あーなんかなんていうかWindowsっぽい？この感じかー…
慣れもあるかもだがSource Han Code JPの方が好み…
kzk4043基本Source Han Code JPにして、Docs系のリポジトリだけMyricaM Mにする？
kzk4043フォントの拡張子について
なんか何回も整理してる気がする…どこかにまとめたつもりだったがどこいった…
.ttf
.woff
.woff2
以下抜粋
- True Type フォント（.ttf）
- MicrosoftとAppleが共同で開発した形式
- 歴史が古く、広く普及しているフォント形式で、対応環境も多い
- 安価
- 収録可能な字体数がOpenTypeより少ない
- 無料のフォントに多く使われている
- Open Type フォント（.ttf、.otf）
- AdobeとMicrosoftが主体で共同開発した形式
- TrueTypeフォントとPostScriptフォントの技術を統合して作られた新しいフォント形式
- PostScriptフォントベースの形式は、拡張子が「.otf」で、TrueTypeフォントベースの形式は、拡張子が「.ttf」もしくは「.otf」 ※「.ttf」の場合、TrueTypeかOpenTypeかの区別が付かない…
- TrueTypeに比べて、多数の高度な機能をもつ（膨大な収録字体数、合字機能、異体字の制御、柔軟な文字詰め）その分高価なフォントが多い
- Windows-Mac間での互換性があるため、相互にデータをやりとりする際に文字化けする心配が少ない
- Webフォント（.woff、.woff2）
- ファイル容量が小さいため、ストレージの節約になる
- 読み込み時間を短縮できる
- 第三者によりダウンロードされデスクトップ上での二次利用（再配布）を防げる
拡張子
- .ttf
- .otf
- .ttc（TrueType Collection）
- 複数のTrueTypeフォントを１つのファイルにまとめたもので、フォント形式とは別物。
- 字間が均等な等幅フォントや、字詰めされたプロポーショナルフォントなど、類似のフォントを１つのファイルにまとめて収録するのに使われます。
- 同じように、OpenTypeCollectionを表した「.otc」という仕組みもありますが、OpenTypeフォントをまとめたものも「.ttc」の拡張子を用いる場合もあります
- .eot（Embedded OpenType）
- .woff（Web Open Font Format）
- .woff2