메뉴 건너뛰기

enjoyTools.net

vscode 워크벤치 편집창에서 웹폰트 사용하기

2022.09.21 00:28

꿈돌이 조회 수:155

아래 링크의 pr과 그 밑의 스택오버플로우 글을 보면 vscode 편집기에서 웹폰트는 정식으로 지원하지 않지만 어떤 식으로든 설치본을 변조해서 웹폰트를 쓸 수는 있다.

https://github.com/microsoft/vscode/pull/142203

 

 

스택오버플로우에 아래와 같은게 있는데, 문제는 매번 개발자도구를 열어서 같은 내용을 실행해야 해서 딱히 의미는 없다.

https://stackoverflow.com/a/54124991/8964990

 

 

 

위의 방법 말고 vscode 워크벤치 관련 파일을 직접 건드리는 방법이 있다.

 

​

D2Coding ligarture 웹글꼴을 추가한다고 가정하면,

https://github.com/Joungkyun/font-d2coding-ligature

 

 

아래 파일에

{vscode설치경로 또는 %appdata%/../Local/Programs/Microsoft VSCode}/resources/app/out/vs/workbench/workbench.desktop.main.css

 

 

아래 내용을 추가한다. (위 저장소의 d2coding-ligature.css 파일 안에 있는 내용이다)

아니면 @import로 가져와도 된다.

-> @import로 가져오는건 안된다. 걍 아래처럼 @font-face 길게 쓰는수 밖에 없겠다.

@font-face{

    font-family: 'D2Coding ligature';

    src: url('https://cdn.jsdelivr.net/gh/joungkyun/font-d2coding-ligature/D2Coding-ligature.eot?#iefix') format('embedded-opentype'),

    url('https://cdn.jsdelivr.net/gh/joungkyun/font-d2coding-ligature/D2Coding-ligature.woff2') format('woff2'),

    url('https://cdn.jsdelivr.net/gh/joungkyun/font-d2coding-ligature/D2Coding-ligature.woff') format('woff'),

    url('https://cdn.jsdelivr.net/gh/joungkyun/font-d2coding-ligature/D2Coding-ligature.ttf') format('truetype'); font-weight: normal; font-style: normal;

}

 

 

이런 식으로 넣어주면 된다.

.monaco-action-bar{white-space:nowrap;height:100%}.monaco-action-bar .actions-container{display:...... 이후생략

@font-face{

    font-family: 'D2Coding ligature';

    src: url('https://cdn.jsdelivr.net/gh/joungkyun/font-d2coding-ligature/D2Coding-ligature.eot?#iefix') format('embedded-opentype'),

    url('https://cdn.jsdelivr.net/gh/joungkyun/font-d2coding-ligature/D2Coding-ligature.woff2') format('woff2'),

    url('https://cdn.jsdelivr.net/gh/joungkyun/font-d2coding-ligature/D2Coding-ligature.woff') format('woff'),

    url('https://cdn.jsdelivr.net/gh/joungkyun/font-d2coding-ligature/D2Coding-ligature.ttf') format('truetype');

    font-weight: normal; font-style: normal;

}

 

settings.json에는 원래 글꼴 추가하듯이 아래와 같이 추가한다.

{

    "editor.fontFamily": "D2Coding ligature, Consolas, 'Courier New', monospace"

}

 

 

Vscode를 다시 실행하면 웹폰트는 적용이 되었을 것이지만 vscode가 손상되었습니다 또는 Your Code installation appears to be corrupt 대충 이런 메시지가 계속 나와서 다시 설치해라고 괴롭혀댄다.

​

vscode는 실행 시 몇몇 중요파일의 변조여부를 체크하는데

위에서 workbench.desktop.main.css 라는 파일을 수정하면서 checksum이 깨져서 그런것이고

resources/app/product.json 파일에서 체크섬 값을 변조된 값으로 바꿔주면 손상되었다고 괴롭히는 메시지가 사라진다

​

윈도우 파워셸로는 대충 아래와 같이 할 수 있다.

# fix_checksum.ps1

 

$bytes  = [System.IO.File]::ReadAllBytes("vscode\resources\app\out\vs\workbench\workbench.desktop.main.css")

$Hasher = New-Object -TypeName System.Security.Cryptography.MD5CryptoServiceProvider

$md5 = $Hasher.ComputeHash($bytes)

$base64 = [System.Convert]::ToBase64String($md5)

 

$checksum = $base64.replace("=","")

 

$json = (Get-Content "vscode\resources\app\product.json" -Encoding UTF8 | Out-String)

$product = ConvertFrom-Json $json

 

$product.checksums.'vs/workbench/workbench.desktop.main.css' = $checksum

$product | ConvertTo-Json -Compress -Depth 10 | Out-File "vscode\resources\app\product.json" -Encoding UTF8

 

 

직접 하려면 workbench.desktop.main.css 파일의 내용으로 md5 -> base64 값을 만든 다음

resources/app/product.json 파일의 해당 부분에 == 이걸 뺀 문자열로 바꿔 주면 된다.

​

​

이후 vscode를 다시 실행하면 편집창의 글꼴이 웹폰트인 D2Coding ligarture로 바뀐 것과 Corrupted 어쩌고 하는 메시지가 사라진 것을 확인할 수 있다.

​

​

문제는 vscode 업데이트시 내용이 전부 리셋되므로 매번 업데이트할 때마다 css와 체크섬 변조를 반복해야된다.

수작업으로 하는게 싫으면 이걸 프로그램이나 스크립트로 만들어서 vscode의 매 업데이트 후에 한 번만 실행해주면 된다.

나는 위에 썼다시피 fix_checksum.ps1 이라는 파워셸 스크립트를 만들어서 해결했다.

 

​

끝.

 

, , , , , , , , , 이 게시물을
목록
목록
쓰기
태그