VS CodeでフォントにSource Han Code JPを設定したら、フォントカラーが真っ黒になってしまった時の解決方法

エディタのVS CodeでフォントをSource Han Code JP（源ノ角ゴシック JP）に設定したら、フォントカラーが真っ黒になってしまう・・・という現象に遭遇し、無事解決したのでまとめておきます。

VS Codeでフォントカラーが真っ黒！

2年ほど前からエディタではSource Han Code JP（源ノ角ゴシック JP）を使うのが定番になっています。
文字のデザインがわかりやすくて好みであることと、フォントの太さを選べるので、エディタのフォントはSource Han Code JPで統一しています。

Source Han Code JPのサンプル

ところが、Macをセットアップした際、いつものようにVS CodeでSource Han Code JPを設定したら、エディタの編集画面に表示される文字がすべて真っ黒になってしまいました。
テーマや設定が変わったのかと思い、あれこれチェックしても問題はなく、フォントに原因があるようです。・・・他のフォントは正常に表示されます。

この現象が発生したのは、2020年12月にM1チップを搭載したMac miniをセットアップした時・・・どうやらM1 MacとVS Code＋Source Han Code JPで発生する症例だと予想されます。

フォントの新バージョンを使うことでトラブル解決！

トラブルが発生した際はVS CodeでSource Han Code JPを使わないことで対応していたのですが、たまたまVS CodeでSource Han Code JPの新バージョンが公開されていることを知って、インストールしてみると・・・正常に表示することがわかりました！

これまで使っていたのは、あらかじめダウンロードしていつでもインストールできるようにしておいたものでバージョンは2.011Rでしたが、2020年11月25日に2.012Rというバージョンが公開されています。
これをダウンロードしてインストールしたら、今まで通り正常に表示されました。

リリースノートなどは確認していないので正確なことはわかりませんが、公開された日付からすると、M1チップ搭載のMacが公開された後なので、今回のトラブルの修正もあっての新バージョンなのかもれないなーと思いました。

ちなみに今回のトラブルが発生したのはM1チップ搭載のMac miniだけで、IntelチップのMacやWindowsでは発生していません。

VS CodeでSource Han Code JPを使う設定

エディタでSource Han Code JPを使う際の設定は、MacとWindowsで微妙に違いがあるのでメモ。

VS Codeなどのエディタのフォント設定に入力するのは下記の文字列になります。
※末尾の -Regular などはフォントウェイト（太さ）なので、好みのものを使います。

Macでの設定

SourceHanCodeJP-ExtraLight
SourceHanCodeJP-Light
SourceHanCodeJP-Normal
SourceHanCodeJP-Regular
SourceHanCodeJP-Medium
SourceHanCodeJP-Bold
SourceHanCodeJP-Heavy

Windowsでの設定

Source Han Code JP ExtraLight
Source Han Code JP Light
Source Han Code JP Normal
Source Han Code JP Regular
Source Han Code JP Medium
Source Han Code JP Bold
Source Han Code JP Heavy

@penchiは、Macでは SourceHanCodeJP-Light、Windowsでは Source Han Code JP Light を設定しています。