◆ テーマのフォントが反映されないのでカスタム CSS でフォント指定して対処

久々に Brackets を使ってみたらアップデートがありました

1.9

前に使ってたの 1.6 とか 1.7 だったような気もするので色々機能増えてるのを期待して更新してみました


すると フォントがなんか違う気がします


アップデート前
bracets-19-font-1


アップデート後
bracets-19-font-2

 
アルファベットが monaco じゃないようです
でも テーマを確認すると
monaco, 'SourceCodePro-Medium', MS ゴシック, 'MS Gothic', monospace;

で monaco になってるようです

ググってみると テーマで指定したフォントが使用されないバグがあるみたいです
issue もあるらしいので 次のバージョンではたぶん直るでしょう

フォントを変える

次で直るとしてもアップデートまでフォントが選べないのは不便ですのでフォントを変えます

Brackets は CEF なので Chromium の開発者ツールが使えます
ここで .CodeMirror-code のスタイルにフォントを指定すればエディタ部分のフォントを好きに変えることができます

ただし 開発者ツール上の変更なのでリロードや再起動でリセットされます
拡張機能を入れたり消したりするだけでまた開発者ツールを開くのも面倒なので カスタム CSS にします


まずは Custom CSS injector というカスタム CSS を作れる拡張機能をインストールします
その後でカスタム CSS を作ります

bracets-css-injection

新しく作って名前はとりあえず "font" にしました
編集ボタンを押せばエディタで開かれるので そこに CSS を書いて保存すればその CSS が適用されます


とりあえず Brackets のデフォルトに
.CodeMirror-code {
    font-family: monaco, 'SourceCodePro-Medium', MS ゴシック, 'MS Gothic', monospace;
    font-size: 12px;
}

簡単ですね

そのわりに軽くググったところでは アップデート待ちましょう というだけで対処方法書いてないところが多かったです
Brackets 使う人って HTML/CSS など Web 関係は出来る人が多いと思う(偏見)のでこれくらいサッと対処できそうなのに
逆に当たり前すぎるからわざわざ書いていなかったり?