VSCode：リガチャフォント「FiraCode」の文字の形を変えてみる

ウェブ制作ノウハウ

2021.12.102021.12.14

この記事は約3分で読めます。

記事内に広告が含まれています

こんにちは、さちです。

以前、無料のコードエディター「Visual Studio Code（以下：VSCode）」に、リガチャ（合字）対応フォント「FiraCode」を導入しました。

先日、その「FiraCode」がアップデートされて、一部の文字の形を変えられるようになりました。

私も、慣れない形で気になる文字があったので、実際に試してみます。

文字の形に違和感がある

VSCode で使用するフォントを「FiraCode」にした状態です。

個人的には、&（アンパサンド）・@（アットマーク）・≦（<=のリガチャ）・≧（>=のリガチャ） は形が独特で、少し違和感があります。

別の形での表示に変えてみましょう。

また、*（アスタリスク）・g（Gの小文字）・＝（==のリガチャ）・≠（!=のリガチャ）・≡（===のリガチャ）・≢（!==のリガチャ） は別にこのままでも良いのですが、参考までに変えてみます。

一部の文字を別の形で表示にするには、FiraCode の最新バージョンが必要です。GitHub からダウンロードしましょう。

ダウンロードした ZIPファイルを解凍すると、フォントファイルが表示されます。

Windows では不具合を避けるため、インストール済みの古いバージョンの「FiraCode」フォントを削除してから、ダウンロードした新しいバージョンのものをインストールした方が良いです。

フォントを削除（アンインストール）する方法は、こちらの記事を参照して下さい。

アクティビティバーの下部にある「管理（歯車）」アイコンをクリック。
「設定」をクリック。（ショートカットは Ctrl + ，キー）
検索に font ligatures と入力。
「Editor: Font Ligatures」にある「settings.json で編集」をクリック。
「editor.fontLigatures」の値に、形を変更したい文字に該当するコードを入力します。今回は、「&」の ss03、「@」の ss05、「*」の cv16、「g」の cv02、「≦」「≧」の ss02、「≠」「≢」の ss08 を入力。上書き保存（Ctrl + S キー）をします。
文字や記号の形が変わりました。