관리자 글꼴 설치 권한 없이 VS 코드에서 사용자 정의 글꼴을 사용하는 방법

하루 종일 정상적으로 일하는 과정에서 나는 대략 75퍼센트의 시간을 Visual Studio 코드에 썼다.VS 코드는 제가 IDE 분야에서 일상적인 드라이버입니다. 제가 가장 좋아하는 특징 중 하나는 사용할 수 있는 맞춤형 단계입니다.나는 사용자 정의의 가장 기본적인 일 중 하나가 편집기와 단말기에서 사용하는 글꼴을 좋아한다.불행하게도 기업 환경에서 일하는 것은 일반적으로 내가 업무 노트북에 관리자 권한이 없다는 것을 의미하며, 이것은 내가 글꼴을 설치할 수 없다는 것을 의미한다.
이 빠른 알림에서 관리자 권한 없이 VS 코드에서 사용자 정의 글꼴을 사용하여 실제 글꼴을 설치하는 방법을 가르쳐 드리겠습니다.

소스 시작 글꼴 선택

우선 사용할 글꼴을 선택해야 합니다.공통 URL을 통해 액세스할 수 있는 모든 글꼴을 사용할 수 있습니다.코드를 작성하고 있기 때문에 단일 공백 글꼴이 필요합니다.
개인적으로 나는 Fira Code by @tonksy을 즐겨 사용한다.Fira 코드는 일반적인 프로그래밍 다중 문자 조합에 사용되는 연결 문자를 포함하는 자유 단일 공백 글꼴입니다.여기에서 다음을 확인할 수 있습니다.

토스키 / FiraCode 코드

프로그래밍 연결자가 있는 자유 등거리 글꼴

글꼴 설치

컴퓨터에 관리자 권한이 있으면 글꼴 설치부터 시작합니다(없으면 Font Setup으로 건너뛰십시오).
다음은 VS 코드의 editor.fontFamily 설정에 문자열을 추가합니다.

그렇습니다!🎉 이제 VS 코드에서 사용자 정의 글꼴을 사용할 수 있습니다.글꼴 설치 권한이 없는 사용자는 계속 읽으십시오.

원격 글꼴 URL

다른 사람들에게는 공개적으로 접근할 수 있는 URL을 방문해야 합니다. 그곳에서는 글꼴을 인용할 수 있습니다.
Fira 코드를 사용하기 때문에 GitHub 저장소를 나누고 원본 글꼴 파일 URL을 참조할 수 있습니다.
사용된 글꼴이 공용 URL(예: Google Fonts)을 통해 제공된 경우 제공된 삽입/가져오기 URL을 통해 글꼴 자산 URL에 접근해야 합니다.공통 URL에 @font-face 선언이 이미 제공되면 가져오기 세션을 만들 때 URL이 제공하는 구조를 사용할 수 있습니다.

JavaScript를 사용하여 가져오기 코드 세그먼트 만들기

글꼴 소스 URL(또는 @font-face 선언)이 있으면 참조를 설정하여 Visual Studio 코드로 가져올 수 있습니다.사용자 정의 JavaScript 세션을 설정하여 글꼴을 가져올 것입니다. 필요에 따라 VS 코드 인스턴스에서 다시 사용할 수 있습니다.

Visual Studio 코드에서 메뉴의 Help > Toggle Developer Tools(또는 Ctrl + Shift + I)으로 이동합니다.

패널 상단의 Sources 탭을 클릭합니다.

패널 왼쪽에서 Sources 을 클릭합니다. Snippets 탭을 보려면 패널의 폭을 확장해야 할 수 있습니다.

클릭 Snippets

은 새 코드 세그먼트의 이름입니다.우리는 New snippet으로 명명할 것이다

지금까지 개발자 도구 패널은 다음과 같습니다.

다음 단계는 custom font URLs을 사용하느냐 Custom-Font-Import declaration을 사용하느냐에 달려 있습니다. (예를 들어 구글 글꼴에서)사용 방법에 맞는 단계로 이동합니다.

사용자 정의 글꼴 URL

사용자 정의 URL이 있는 사용자 정의 글꼴을 사용하고 있는 경우 (예: 내 분기 버전의 Fira 코드) 아래에 표시된 JavaScript 코드를 새 코드 섹션에 붙여넣고 @font-face 자리 표시자를 사용할 글꼴의 사용자 정의 URL로 바꾸십시오.
해당 확장자가 있는 파일만 포함됩니다(예: FONT_URL, woff 등).편집한 후 코드 세그먼트를 저장해야 합니다.

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);

@ 글꼴 선언

만약 글꼴이 ttf 성명(예를 들어 구글 글꼴)을 제공했다면, 글꼴을 선택할 때 제공된 CDN/embed URL로 이동하여 URL의 모든 내용을 아래 자바스크립트 코드 섹션에 붙여넣고 @font-face 자리 표시자를 바꾸기만 하면 됩니다.편집한 후 코드 세그먼트를 저장해야 합니다.

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);

구글 글꼴에서 Fira 코드를 가져오는 예시를 보려면 누르십시오

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 코드 설정을 열고 PASTE_FONT_FACE_DECLARATIONS을 검색합니다.

이 값을 편집하여 옵션에 필요한 글꼴을 먼저 나열합니다.

Fira 코드 예제의 경우 이 값은 다음과 같습니다.

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

글꼴 연결 사용

다음으로, 우리의 글꼴은 글꼴 연결자를 지원하기 때문에, 설정에서 이 연결자를 사용해야 합니다.이 설정은 현재 editor.fontFamily 설정에서만 사용할 수 있으므로 새 속성을 추가하십시오.

"editor.fontLigatures": true

글꼴 가져오기 위해 JavaScript 코드 세그먼트 실행

현재 모든 것이 올바르게 설정되어 있지만, 알다시피, 우리의 글꼴은 터미널이나 편집기 패널에서 사용되지 않습니다.글꼴을 적용하려면 사용자 정의 JavaScript 코드 세그먼트를 실행하여 실제로 글꼴을 가져와야 합니다.

메뉴(또는 json)

에서 Help > Toggle Developer Tools으로 내비게이션하여 개발 도구 열기

패널이 표시되지 않으면 패널로 이동합니다.

패널 왼쪽에 있는 새 Ctrl + Shift + I 코드 세그먼트를 마우스 오른쪽 버튼으로 클릭하고 Sources > Snippets을 선택합니다.

그러면 코드 세그먼트에서 JavaScript를 트리거하고 VS 코드 인스턴스에 사용자 정의 태그를 추가합니다.편집기와 터미널은 몇 초 후에 업데이트해야 합니다. 현재 사용자 정의 글꼴을 사용하고 있습니다!🎉

응용 프로그램이 불러올 때 코드 세그먼트 실행하기

본고에서 소개한 사용자 정의 글꼴 가져오기 방법의 단점 중 하나는 코드 세그먼트가 모든 새로운 VS 코드 창에서 실행되어야 한다는 것이다👎. 이것은 프로그램을 시작할 때나 기존 실례에서 새 창을 열 때마다 글꼴을 활성화하는 작업이 필요하다는 것을 의미한다.
우리는 코드 세그먼트를 저장했기 때문에, 프로그램을 다시 시작한 후에도 그것을 보존해야 한다👏 개발자 도구를 열고 Custom-Font-Import으로 이동하여 코드 세그먼트를 마우스 오른쪽 단추로 클릭한 다음 Run을 누르십시오.
관리자 권한이 있어야 실행할 수 있는 확장 이외에 자동으로 가져올 수 있는 방법을 아직 찾지 못했습니다.만약 당신이 이 과정을 자동화하는 방법을 알고 있다면, comments에 저에게 메시지를 남겨 주세요!
사용자 정의 VS 코드 글꼴에 대한 빠른 알림을 확인해 주셔서 감사합니다.작업 컴퓨터에서 개발할 때 기본 글꼴을 사용하지 않기를 바랍니다!