1124_VSCodeで英語フォントと日本語フォントを別々に指定する手順

https://sl.bing.net/dmV1oQXs1uu

Q.1

vscodeで英語フォントと日本語フォントを別々に指定する手順を具体的な例で分かりやすく説明して下さい。

A.1

VSCodeで英語フォントと日本語フォントを別々に指定する手順は以下の通りです。

  1. VSCodeを開き、左下の歯車アイコンをクリックして「設定」を選択します。
  2. 設定画面で検索ボックスに「fontfamily」と入力します。
  3. 検索結果の中から「Editor: Font Family」を見つけます。この項目は、VSCodeで使用するフォントのリストを設定するものです。
  4. 「Editor: Font Family」の値を編集します。最初に英語フォントの名前を入力し、次に日本語フォントの名前を入力します。例えば、英語フォントにInconsolata、日本語フォントにメイリオを使いたい場合は、Inconsolata, メイリオと入力します。フォントの名前はカンマで区切ります。フォントの名前は正確に入力する必要があります。フォントがインストールされていない場合は、インストールするか、別のフォントを選択してください。
  5. 設定を保存します。VSCodeのエディター画面でフォントが変更されていることを確認します。英語文字は英語フォントで、日本語文字は日本語フォントで表示されます。

以上がVSCodeで英語フォントと日本語フォントを別々に指定する手順です。詳しくは、以下の参考サイトをご覧ください。

ソース: Bing との会話 2023/11/24 (1) Visual Studio Code (VSCode) のフォントを変更する .... https://programism.net/vscode-font-setting/. (2) VSCodeで、英語フォントとメイリオを使って等幅フォントのよう .... https://qiita.com/standard-software/items/111d6edf721e796d7ae7. (3) Visual Studio Codeのフォントについて | ジーアールアイ株式会社 .... https://blog.grikk.co.jp/2021/08/20/vscode-font/. (4) Visual Studio Code (VSCode) のフォントを変更する .... https://bing.com/search?q=vscode+%e8%8b%b1%e8%aa%9e%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88+%e6%97%a5%e6%9c%ac%e8%aa%9e%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88. (5) VSCode（Visual Studio Code）のフォントを変更する方法 .... https://akizora.tech/vscode-font-528. (6) undefined. https://os0x.hatenablog.com/entry/20100822/1282495059. (7) undefined. https://buralog.jp/programming-font/. (8) undefined. https://mofoolog.hateblo.jp/entry/windows-inconsolata-meiryoke-font-rink-1603. (9) undefined. https://fonts.google.com/specimen/Inconsolata. (10) undefined. https://fontmeme.com/jfont/inconsolata-font/. (11) undefined. https://fontforge.org/en-US/downloads/.

Q.2

文字列を選択してハイライトした時のフォントを指定する手順を具体的な例で分かりやすく説明して下さい。

A.2

文字列を選択してハイライトしたときのフォントを指定する手順は、VSCodeの設定ファイルを直接編集する方法と、拡張機能を使う方法があります。ここでは、拡張機能を使う方法を具体的な例で説明します。

  1. VSCodeを開き、左下の歯車アイコンをクリックして「拡張機能」を選択します。
  2. 検索ボックスに「EditorConfig for VS Code」と入力し、検索結果の中から「EditorConfig for VS Code」を見つけます。この拡張機能は、プロジェクトごとにフォントやインデントなどのエディターの設定を管理するためのものです。
  3. 「EditorConfig for VS Code」の右側にある「インストール」ボタンをクリックして、拡張機能をインストールします。
  4. プロジェクトのルートフォルダに「.editorconfig」という名前のファイルを作成します。このファイルには、プロジェクトで使用するエディターの設定を記述します。
  5. 「.editorconfig」ファイルに以下の内容を追加します。ここでは、拡張子が「.md」のファイルに対して、フォントファミリーを「Inconsolata」に、フォントサイズを「16」に指定しています。他の拡張子に対しても同様に設定できます。
# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true

# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,py}]
charset = utf-8

# 4 space indentation
[*.py]
indent_style = space
indent_size = 4

# Tab indentation (no size specified)
[Makefile]
indent_style = tab

# Indentation override for all JS under lib directory
[lib/**.js]
indent_style = space
indent_size = 2

# Matches the exact files either package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

# Matches the exact file .editorconfig
[.editorconfig]
indent_style = space
indent_size = 4

# Matches the exact file .md
[*.md]
font_family = Inconsolata
font_size = 16
  1. 設定を保存します。VSCodeのエディター画面でフォントが変更されていることを確認します。「.md」ファイルを開くと、文字列を選択してハイライトしたときに「Inconsolata」フォントで表示されます。

以上がVSCodeで拡張子別にフォントを指定する手順です。詳しくは、以下の参考サイトをご覧ください。

ソース: Bing との会話 2023/11/24 (1) VSCodeの選択範囲や検索単語の色設定を変更してもっと目立た .... https://qiita.com/vrn/items/8e3d8f5de828adbec827. (2) Visual Studio Codeで最初にしておきたいオススメ設定 - [SMART]. https://rfs.jp/sb/vsc/vsc-setting.html. (3) VSCodeの選択範囲や検索単語の色設定を変更してもっと目立た .... https://bing.com/search?q=vscode+%e9%81%b8%e6%8a%9e+%e3%83%8f%e3%82%a4%e3%83%a9%e3%82%a4%e3%83%88+%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88. (4) テーマ、フォント、テキスト、およびアクセシビリティのため .... https://learn.microsoft.com/ja-jp/visualstudio/ide/how-to-change-fonts-and-colors-in-visual-studio?view=vs-2022. (5) Visual Studio Codeで拡張子別にフォントを変更する | Think Twice. https://thinktwice.tech/it/vscode/change_font_by_extension_in_vscode/. (6) undefined. https://rictyfonts.github.io/. (7) undefined. https://rictyfonts.github.io/diminished. (8) undefined. https://github.com/adobe-fonts/source-code-pro. (9) undefined. https://github.com/adobe-fonts/source-han-code-jp/releases. (10) undefined. https://fonts.google.com/specimen/Roboto+Mono. (11) undefined. https://www.levien.com/type/myfonts/inconsolata.html. (12) undefined. https://sourceforge.net/projects/dejavu/. (13) github.com. https://github.com/xuchengpeng/hugo-blog/tree/8f41c94b736b355314936e84c6ff2c932d3c9d77/content%2Fpost%2Feditorconfig.md. (14) github.com. https://github.com/ranlempow/Sublime-Life/tree/b3801c8e410bcf8d38f21d17bc827078e461b456/README.md.

Q.3

vscodeで多くの日本人に使用されている日本語フォントは、何がありますか？Windows用フォントを最大10件紹介して下さい。

A.3

VSCodeで多くの日本人に使用されている日本語フォントは、以下のようなものがあります。Windows用フォントを最大10件紹介します。

  • Ricty Diminished¹：英語フォントにInconsolata、日本語フォントにMigu 1Mを組み合わせたプログラミング用の等幅フォントです。半角と全角の幅の比が1:2になっています。
  • Myrica²：英語フォントにBitstream Vera Sans Mono、日本語フォントにM+ FONTSを組み合わせたプログラミング用の等幅フォントです。半角と全角の幅の比が1:2になっています。Myrica M、Myrica P、Myrica Nの3種類があります。
  • UDEV Gothic³：英語フォントにDejaVu Sans Mono、日本語フォントに源ノ角ゴシックを組み合わせたプログラミング用の等幅フォントです。半角と全角の幅の比が1:2になっています。UDEV Gothic JPDOC、UDEV Gothic 35、UDEV Gothic LGの3種類があります。
  • PlemolJP⁴：英語フォントにPlemol、日本語フォントに源ノ角ゴシックを組み合わせたプログラミング用の等幅フォントです。半角と全角の幅の比が1:2になっています。
  • Source Han Code JP⁵：英語フォントにSource Code Pro、日本語フォントに源ノ角ゴシックを組み合わせたプログラミング用の等幅フォントです。半角と全角の幅の比が2:3になっています。
  • 游ゴシック⁶：Windowsに標準でインストールされている日本語フォントです。等幅ではありませんが、プログラミングに使えるフォントとして人気があります。
  • MS ゴシック：Windowsに標準でインストールされている日本語フォントです。等幅で半角と全角の幅の比が1:2になっています。
  • VLゴシック：英語フォントにLuxi Mono、日本語フォントにさざなみゴシックを組み合わせたプログラミング用の等幅フォントです。半角と全角の幅の比が1:2になっています。
  • HackGen：英語フォントにHack、日本語フォントに源ノ角ゴシックを組み合わせたプログラミング用の等幅フォントです。半角と全角の幅の比が1:2になっています。HackGen、HackGen Console、HackGen35、HackGen35 Consoleの4種類があります。
  • Cica：英語フォントにRoboto Mono、日本語フォントにMigu 1Mを組み合わせたプログラミング用の等幅フォントです。半角と全角の幅の比が1:2になっています。

以上がVSCodeで多くの日本人に使用されている日本語フォントの一部です。詳しくは、以下の参考サイトをご覧ください。

ソース: Bing との会話 2023/11/24 (1) プログラミングフォント2023年度版 #プログラミング - Qiita. https://qiita.com/chihayafuru/items/f48f088dbb231fd6d13b. (2) VSCode（Visual Studio Code）のフォントを変更する方法 .... https://akizora.tech/vscode-font-528. (3) コーディングに最適な日本語対応の等幅フォントSource Han .... https://bing.com/search?q=vscode+%e6%97%a5%e6%9c%ac%e8%aa%9e%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88+Windows. (4) 今更ながら、Source Han Code JPをVSCodeに設定してみたら .... https://qiita.com/kurogoma939/items/6dd8a3c1260335014775. (5) Visual Studio Code (VSCode) のフォントを変更する .... http://programism.net/vscode-font-setting/. (6) VScodeにSourceHanCode JPを追加した。(文字フォント .... https://qiita.com/haya_ken/items/d9f32bcbb6cd0e6199ed. (7) プログラミングフォント2023年度版 #プログラミング - Qiita. https://qiita.com/chihayafuru/items/f48f088dbb231fd6d13b. (8) VSCode（Visual Studio Code）のフォントを変更する方法 .... https://akizora.tech/vscode-font-528. (9) コーディングに最適な日本語対応の等幅フォントSource Han .... https://bing.com/search?q=vscode+%e6%97%a5%e6%9c%ac%e8%aa%9e%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88+Windows. (10) 今更ながら、Source Han Code JPをVSCodeに設定してみたら .... https://qiita.com/kurogoma939/items/6dd8a3c1260335014775. (11) Visual Studio Code (VSCode) のフォントを変更する .... http://programism.net/vscode-font-setting/. (12) VScodeにSourceHanCode JPを追加した。(文字フォント .... https://qiita.com/haya_ken/items/d9f32bcbb6cd0e6199ed. (13) ja.wikipedia.org. https://ja.wikipedia.org/wiki/Visual_Studio_Code.