vscode 워크벤치 편집창에서 웹폰트 사용하기
2022.09.21 00:28
아래 링크의 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 이라는 파워셸 스크립트를 만들어서 해결했다.
끝.
댓글 0
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
18 | php7.4 확장 | 꿈돌이 | 2024.04.20 | 0 |
» | vscode 워크벤치 편집창에서 웹폰트 사용하기 | 꿈돌이 | 2022.09.21 | 159 |
16 | vscode 제안항목 트리거 취소 | 꿈돌이 | 2022.02.17 | 162 |
15 | vscode 1.58 이후 편집창에 터미널 띄우기 | 꿈돌이 | 2021.07.09 | 251 |
14 | 피씨방스튜디오 만들기 #번외6 - 닷넷코어 준비 | 꿈돌이 | 2019.01.02 | 633 |
13 | 피씨방스튜디오 만들기 #번외5 - JSP 준비 | 꿈돌이 | 2018.11.01 | 683 |
12 | 피씨방스튜디오에서 vscode 업데이트 | 꿈돌이 | 2018.09.06 | 577 |
11 | 피씨방스튜디오 만들기 #번외4 - Go 준비 | 꿈돌이 | 2018.07.14 | 879 |
10 | VSCode 터미널에서 - Powershell 프롬프트 경로 짧게 하기 | 꿈돌이 | 2018.06.29 | 635 |
9 | 피씨방스튜디오 만들기 #번외3 - Python(3.x) 준비 | 꿈돌이 | 2018.03.16 | 682 |
8 | 피씨방스튜디오 만들기 #번외2 - PostgreSQL 준비 | 꿈돌이 | 2017.11.02 | 560 |
7 | 피씨방스튜디오 만들기 #번외1 - Node.js 준비 | 꿈돌이 | 2017.09.19 | 686 |
6 | 피씨방스튜디오 만들기 #4/4 - 취합 및 마무리 | 꿈돌이 | 2017.09.08 | 764 |
5 | 피씨방스튜디오 만들기 #3/4 - NginX, PHP 준비 | 꿈돌이 | 2017.09.08 | 751 |
4 | 피씨방스튜디오 만들기 #2/4 - MariaDB, HeidiSQL 준비 | 꿈돌이 | 2017.09.07 | 782 |
3 | 피씨방스튜디오 만들기 #1/4 - vscode 포터블 설정 | 꿈돌이 | 2017.09.07 | 1892 |
2 | VSCode 외 웹서버 및 node.js 등 포터블 설정 백업 | 꿈돌이 | 2017.03.21 | 903 |
1 | VSCode 다중커서 | 꿈돌이 | 2017.02.28 | 19487 |