カスタムフォントを使用する方法

仕事の通常のコースの間、私はVisual Studioコードで私の時間のおよそ75 %を費やします.VSコードはIDEに関して私の毎日のドライバーです、そして、私が最も好きである特徴のうちの1つは利用できるカスタマイズのレベルです.私がカスタマイズする最も基本的なものの1つは、エディタと端末の中で使われるフォントです.残念ながら、エンタープライズ環境での作業は通常、私は私の仕事のラップトップ上で管理者特権を持っていないことを意味します.
この簡単なヒントでは、実際にフォントをインストールするためにAdmin特権なしでVSコードでカスタムフォントを使う方法をあなたに歩かせます.

オープンソースフォントを選ぶ

まず、使用するフォントを選択する必要があります.パブリックURLを介してアクセス可能な任意のフォントを使用することができます.私たちがコードを書いているので、あなたはmonospaceフォントが欲しいです.
個人的にはFira Code by @tonksy . FIRAコードは、共通のプログラミングのマルチ文字の組み合わせのための結紮を含む無料のmonospaceフォントです.ここでチェックできます.

トンコン / フィラコッド

プログラミングLigatureによる自由な単分散フォント

フォントインストール

お使いのコンピュータに管理権限がある場合は、フォントをインストールすることから始めますFont Setup ).
次に、文字列をeditor.fontFamily ここで示すVSコードの設定

それだ!🎉 これで、VSのコードでカスタムフォントを使用するように設定されています.フォントをインストールしないでください.

リモートフォントURL

私たちの残りの部分では、フォントを参照できるパブリックアクセス可能なURLにアクセスする必要があるでしょう.
FIRAコードを使用しているので、Githubリポジトリをforkし、rawフォントファイルURLを参照できます.
パブリックURLを使用して既に利用可能なフォントを使用している場合など.Google Fonts ), あなたは、提供されるembed/import URLを通してフォント資産URLにアクセスする必要があります.パブリックURLが既に@font-face 次に、インポートスニペットを作成するときにURLが提供する構造体を使用できます.

JavaScriptを使用したインポートスニペットの作成

フォントソースURLを持っていたら@font-face 宣言すると、Visual Studioのコードにインポートするための参照を設定できます.VSのコードインスタンスで必要に応じて再利用できるフォントをインポートするためにカスタムJavaScriptのスニペットを設定します.

Visual StudioのコードでHelp > Toggle Developer Tools メニューでCtrl + Shift + I )

をクリックしてSources パネルの上部にあるタブ.

の左側にSources パネルクリックSnippets (パネルの幅を広げる必要がありますSnippets タブ).

クリックNew snippet

新しいスニペットに名前を付けてください.我々は、我々の名前を挙げます.Custom-Font-Import

これまでのところ、開発者用のツールパネルは次のようになります.

次のステップは、使用している場合によって異なりますcustom font URLs , または @font-face declaration (例えば、Googleフォントから).あなたの使用に適用するステップに進んでください.

カスタムフォントURL

カスタムフォントを使用している場合は、カスタムURLを使用している場合は、以下のように表示されるJavaScriptコードをペーストしますFONT_URL カスタムURLを使用したいフォントのプレースホルダー.
対応する拡張子を持つファイルがある行だけを含めます.woff , ttf , など)編集後にスニペットを保存してください.

var styleNode = document.createElement('style');
styleNode.type = "text/css";
var styleText = document.createTextNode(`
    @font-face {
        font-family: "Fira Code";
        src: url("FONT_URL.woff2") format("woff2"),
            url("FONT_URL.woff") format("woff"),
            url("FONT_URL.ttf") format("truetype"),
            url("FONT_URL.otf") format("opentype");
        font-weight: normal;
        font-style: normal;
    }
`);
styleNode.appendChild(styleText);
document.getElementsByTagName('head')[0].appendChild(styleNode);

フォントフェイス宣言

あなたのフォントが既に提供するならば@font-face 宣言(例えば、Googleフォント)は、単にフォントを選択したときに提供されるCDN/embedのURLに移動することができますし、下のJavaScriptのスニペットにURLの内容全体でペーストし、PASTE_FONT_FACE_DECLARATIONS プレースホルダ編集後にスニペットを保存してください.

var styleNode = document.createElement('style');
styleNode.type = "text/css";
var styleText = document.createTextNode(`
    PASTE_FONT_FACE_DECLARATIONS
    `);
styleNode.appendChild(styleText);
document.getElementsByTagName('head')[0].appendChild(styleNode);

Firefoxのコードをインポートする例を表示するには

var styleNode = document.createElement('style');
styleNode.type = "text/css";
var styleText = document.createTextNode(`
    /* cyrillic-ext */
    @font-face {
    font-family: 'Fira Code';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/firacode/v9/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJV37Nv7g.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    /* cyrillic */
    @font-face {
    font-family: 'Fira Code';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/firacode/v9/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVT7Nv7g.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* greek-ext */
    @font-face {
    font-family: 'Fira Code';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/firacode/v9/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVz7Nv7g.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
    }
    /* greek */
    @font-face {
    font-family: 'Fira Code';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/firacode/v9/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVP7Nv7g.woff2) format('woff2');
    unicode-range: U+0370-03FF;
    }
    /* latin-ext */
    @font-face {
    font-family: 'Fira Code';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/firacode/v9/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJV77Nv7g.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
    font-family: 'Fira Code';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/firacode/v9/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVD7Ng.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    `);
styleNode.appendChild(styleText);
document.getElementsByTagName('head')[0].appendChild(styleNode);

VSコードでのフォントの使用

インポートスニペットを設定したので、フォントを使用するにはVisual Studioのコードを設定する必要があります.

エディタフォントファミリーを設定する

あなたのVSコードの設定を開き、editor.fontFamily .

指定したフォントがオプションの中で最初に表示されるように値を編集します.

FIRAコード例では、次のようになります.

// Editor: Font Family
'Fira Code', Consolas, 'Courier New', monospace

フォントの連結を有効にする

次に、フォントのフォントをサポートしているので、我々は同様に設定でこれらを有効にする必要があります.この設定は現在、json 設定のため、新しいプロパティを追加します(存在しない場合)

"editor.fontLigatures": true

JavaScriptのスニペットを実行してフォントをインポートする

すべてが適切に構成されますが、あなたが気づくならば、我々のフォントはまだターミナルまたはエディタ・パネルで使われていません.フォントを適用するためには、実際にJavaScriptのスニペットを実行する必要があります.

に移動することによって開発ツールを開きますHelp > Toggle Developer Tools メニューでCtrl + Shift + I )

移動するSources > Snippets パネルが表示されない場合.

右クリックしてCustom-Font-Import パネルの左側にスニペットを選択し、Run .

これは、私たちのスニペットでJavaScriptをオフにし、カスタムコードタグをVSコードインスタンスに追加します.エディタとターミナルは、数秒後に更新する必要があります、今私たちのカスタムフォントを使用している!🎉

アプリケーションロードでスニペットを実行する

このポストで概説されるカスタムフォント輸入方法の1つの欠点は、スニペットがあらゆる新しい対👎. これは、アプリケーションを起動するたびに、または既存のインスタンスから新しいウィンドウを開くたびに、フォントをアクティブにする小さな作業を行う必要があります.
我々はスニペットを保存したので、アプリケーションを再起動した後でも保存される必要があります👏 あなただけの開発ツールを開く必要があるSources > Snippet , スニペットを右クリックし、クリックしますRun .
私は拡張子の外でインポートを自動化する方法を見つけることができませんでした(残念なことに)また、管理する特権を必要とします.あなたがこのプロセスを自動化する方法を知っているならば、私にメッセージを下ろしてくださいcomments !
あなたのVSコードフォントをカスタマイズする上で、この簡単なヒントをチェックアウトしてくれてありがとううまくいけば、もはやあなたの仕事のコンピュータ上で開発を行うときにデフォルトのフォントを使用して立ち往生していない!