Help us understand the problem. What is going on with this article?

Visual Studio Codeのフォント設定: Ubuntu

More than 3 years have passed since last update.

ローカルのUbuntu 16.04 LTS上にPHPの開発(勉強)環境を構築しました。エディターは何にしようか?迷っていたタイミングで、Visual Studio Codeバージョン1.0<https://www.visualstudio.com/ja-jp/products/code-vs.aspx>がリリースされました。Windows/Linux/OS X対応のマルチプラットフォームで今回の環境用エディターに採用決定。PHP、HTMLはIntelliSenseによるコードヒントがあって、とっても便利ですね。
vsc_01.png

今回は、ネットにも情報が少なく、私がはまったフォント周りについてまとめます。


・「ユーザー設定」

設定は 基本設定>ユーザー設定 で開くsettings.jsonファイルに記述します。
vsc_02.png
このように真ん中のペインに表示される既存の設定(上書きできません)を参考に、必要な設定をsettings.jsonファイルに書きます。
フォントの制御は "editor.font" で行います。

【事前準備】

フォントの名称はしっかり記述しないと、設定できません。最初に自分のマシンにインストールされているフォントの名称を把握して、検討しましょう。
vsc_09.png

今回は、下記のようにしてインストールされているフォントリストを取得し、フォントファミリーorフォント名、ウェイト名をコピーして使いました。同じフォントファミリーでも、Bold(太い書体)、Regular(レギュラー)、Light(細め)などのウェイトがあるので、自分が意図したフォントが表示されるよう、しっかり記述しましょう。

~$ fc-list
/home/bellota/.fonts/SourceCodePro-Bold.otf: Source Code Pro:style=Bold
/home/bellota/.fonts/SourceCodePro-Regular.otf: Source Code Pro:style=Regular

【フォントサイズを18にしたい場合】

任意の数字を記入します。保存すると、すぐにエディター上に設定が反映されます。

settings.json
// フォントサイズ
{
"editor.fontSize": 18,
}

【フォントを変更したい場合:デフォルトフォントのUbuntuファミリーを指定】

フォントの名前を記入します。保存すると、すぐにエディター上に設定が反映されます。
vsc_03.png

settings.json
// フォント指定
{
"editor.fontFamily": "Ubuntu"
}

【フォントを変更したい場合:Source Code Proファミリーを指定】

フォントの名前を記入します。保存すると、すぐにエディター上に設定が反映されます。
vsc_04.png

settings.json
// フォント指定
{
"editor.fontFamily": "Source Code Pro"
}

【フォントを変更したい場合:ウェイト別のフォントを指定】

フォントのウェイトを含めた名前を記入します。保存すると、すぐにエディター上に設定が反映されます。このフォントにすると、英数字が極端に細くなっているのが分かります。
vsc_05.png

settings.json
// フォント指定
{
"editor.fontFamily": "Source Code Pro ExtraLight"
}

【フォントを変更したい場合:日本語表記用に別なフォントを指定】

英数字のフォント指定に加えて、日本語表記用の別なフォントを指定します。今回は TakaoExゴシック を表示させます。英数字フォントと日本語フォントの間をコンマで区切ります。保存すると、すぐにエディター上に設定が反映されます。
vsc_06.png

settings.json
// フォント指定
{
"editor.fontFamily": "Source Code Pro, TakaoExゴシック"
}

【フォントを変更したい場合:日本語表記用に別なフォントを指定】

英数字のフォント指定に加えて、日本語表記用の別なフォントを指定します。今回は Takao Pゴシック を表示させます。英数字フォントと日本語フォントの間をコンマで区切ります。保存すると、すぐにエディター上に設定が反映されます。先ほどのTakaoExゴシックと比べると、日本語表字が異なるのが分かりますね。
vsc_07.png

settings.json
// フォント指定
{
"editor.fontFamily": "Source Code Pro, Takao Pゴシック"
}

【おまけ:私のお気に入り】

いろいろと表示させてみたところ、私のお気に入りは Source Code Pro MediumとNoto Sans CJK JP Regularの組み合わせになりました。
vsc_08.png

settings.json
// フォント指定
{
"editor.fontFamily": "Source Code Pro Medium, Noto Sans CJK JP Regular"
}

参考にしたサイト:

・特集:Visual Code早分かりガイド
<http://www.atmarkit.co.jp/ait/articles/1507/10/news028.html>

・@IT:使用可能なフォントを調べるには
<http://www.atmarkit.co.jp/flinux/rensai/linuxtips/691chkfonts.html>

・Adobe Soure Code Pro
UIやコーディング環境用に開発されたフォント「Adobe Soure Code Pro」は、GitHubから無償でダウンロードできます。
<https://github.com/adobe-fonts/source-code-pro/releases/tag/2.010R-ro/1.030R-it>

・Google Noto Fonts
GoogleとAdobeの共同開発のフォント。世界の多くの言語がコンピューターで問題なく表示されるよう、多くの言語で同じようなスタイルを保ったフォントが制作され、無償で公開されています。私はNoto Sans CJK JPと、日本語フォントを今回設定しました。たくさんのフォントが公開されているので、ダウンロード前に吟味してからインストールしましょう。よくばると、大変な量のフォントがインストールされてしまうので...
<https://www.google.com/get/noto/>

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした