質問: VSCode(Visual Studio Code)においてsettings.jsonでシンタックスハイライトの設定をしています。 なんの構文でもいいのですが"fontStyle"を"bold"に指定した場合にエディタ上で表示がずれて困っています。 例えばエディタ上で下記のようなテキストがある場合に"case"が太字だと"e"と"3"の位置が1~2ドット程度ずれます。 **case** // 太字 (bold)。表示が下の行より少し右にずれる 0123 // 普通の太さ ``` settings.json設定例 "keywords": { "foreground": "#FFFFFF", "fontStyle": "bold", }, ``` この現象はフォントによって差異があり、ずれないものもあるのですが、肝心の半角全角比率2:1であるフォントMyrica MやMS ゴシックなどいくつかを確認したところだめでした。 これでは複数行で見た目を揃えたいときわかりづらくなります。 自分が知っている他のエディタでは見られない現象です。 対策について何かないでしょうか。 追記1 OSはWindows8.1 VSCodeのバージョンは1.33.1 です。 追記2 こちらをいじってみましたが変化は無くずれたままです。 ``` window.zoomLevel editor.fontSize editor.lineHeight editor.letterSpacing ``` boldを指定することで単純に文字が太くなってその分幅が増えているようです。 不思議なのは2対1等幅フォントを使う人にとって大きな問題だと思うのですが、検索しても同様の問題が日本語でも英語でもでてこないことです。(英語での検索については仕方が悪いだけかもしれませんが) 全角を使っているわけでもありませんし。 単にみなさんboldを使ってないだけなのでしょうか。(メリハリが効いて見やすくなるので使いたいです)
回答: まず初めに知っておいて欲しいのは、Visual Studio Codeは等幅フォント専用になるように作られているわけでは無く、プロフォーショナルフォントも使えるように、そのフォントがレンダリングされるがままに幅を取るようになっています。サクラエディタ等のような等幅フォント前提のエディタとはそもそもの作りや設計が異なるということです。 では、等幅フォントの場合はどうなるかですが、フォントが等幅にレンダリングされる限りは期待通りの動作をするでしょう。しかし、それが太字の場合、**表示しようとするフォントに太字に関する情報が含まれていない(太字のグリフが無い)と単純にフォントの各線を縦横に太くするレンダリングを行ってしまう**ために幅が増加します。「Myrica M」や「MS ゴシック」などにはそういった太字の情報が無いため、横幅が少しずつ大きくなり、ズレてしまったと言うことです。 逆に言えば、太字の情報も含まれていて、横幅が変わらないようになっているフォントもあると言うことです。私の手元(Windows 10 1809、Visual Studio Code 1.33.1)では下記フォントについて、ずれるという現象は発生せず、太字の場合も横幅が変わらないままになっていることを確認しました。一度お試しください。(名前はVisual Studio Codeで設定するときの名前です。リンク先はダウンロード元です。独断と偏見によるお勧め順です。) * Sarasa Mono J Fira Codeのようなligature(合字)に対応したCJKプログラミング用フォントです。`"editor.fontLigatures"`を`true`にすると`!=`が`≠`のように表示されるようになります。 * Migu 1M 古くから有るプログラミング用フォントで、日本語特有の文字も区別しやすいように工夫がされています。姉妹フォントのMigu 2Mでも可能です。 * Noto Sans Mono CJK JP 豆腐(文字が□になる現象)をなくすために作られたNotoフォントのうち日本語用Sans Serifフォントです。等幅のMonoはダウンロードできるNoto Sans CJK JPの中に含まれます。フォント一覧ではRegularとBoldの二つのフォントにわかれていますが、それらを付けずに指定することで、自動的に通常はRegular、太字はBoldを使うようになります。ただし、プログラミング用フォントではないため、0とOが識別しにくい等の欠点があります。 * Source Han Code JP 少し変わり種で、1:2ではなく2:3となるプログラミング用フォントです。好みによりますが、英字が大きいため、愛用している人もいるそうです。 私のPCに入っていたものは上のものだけですが、その他にもあるかと思いますので、探してみてください。