VS Code UI 폰트를 바꿔보자!

나는 Windows OS 기본 글꼴, 즉 Segoe UI를 좋아하지 않으며 VS Code에서는 매우 끔찍해 보입니다. 아래 이미지 참조

오늘은 VS Code UI 글꼴을 전환하는 방법을 알려드리겠습니다.

어떤 VS 코드가 UI에서 사용되는지 확실하지 않기 때문에 원하는 글꼴을 선택하고 모든 무게를 설치하십시오. 나 자신을 위해 Inter을 구성했습니다.

그런 다음 workbench.desktop.main.css를 찾으려고 시도하면 Microsoft VS Code를 설치한 모든 곳에서 이 파일을 찾을 수 있습니다. 내 컴퓨터에서 C:\Users\Kunal Tanwar\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench 내부에서 찾았습니다.

이제 workbench.desktop.main.css를 열고 VS Code에서 편집하는 경우 코드 포맷터가 비활성화되어 있는지 확인하십시오.

검색 (*이 형식은 찾을 수 없습니다.)

.windows {
  font-family: Segoe WPC, Segoe UI, sans-serif;
}

위의 코드를 사용자 정의 글꼴로 수정하십시오. 또한 두 가지 추가 속성을 추가했습니다. 그들은 완전히 선택 사항입니다.

.windows {
  font-family: Inter, Segoe WPC, Segoe UI, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

파일을 저장하세요! VS 코드를 다시 시작하십시오! 변경 사항을 확인하십시오!

VS Code - 새로운 모습

이제 코드 편집기를 열 때마다 [지원되지 않음] 제목에서 볼 수 있듯이 경고가 표시됩니다.

참고 - 최근 업데이트(예: 1.70.0)에서 VS 코드는 제목 표시줄에서 [지원되지 않음]을 제거했습니다.



작은 톱니바퀴 아이콘을 클릭하고 다시 표시하지 않음을 선택하여 이 경고를 비활성화합니다.






위의 방법은 상황에 맞는 메뉴, 검색 표시줄 및 Markdown 미리 보기(주로 iframe)에 적용되지 않습니다. 이러한 요소에 대한 스타일 지정은 JavaScript에서 생성되고 구성이 상당히 복잡하기 때문입니다. 해커를 팔로우하세요 😂

이를 위해 사용자 정의해야 합니다workbench.desktop.main.js. 동일한 위치에서 이 파일을 찾을 수 있습니다.

상황에 맞는 메뉴

검색 :host-context(.windows)




검색 창

검색 DEFAULT_FONT_FAMILY


Markdown의 경우 세 번째 파일을 사용자 지정해야 합니다 😅 많은 것을 알고 있지만 무엇을 할 수 있습니까? VS Code는 여전히 이 옵션을 구현하지 않습니다. 그래서 우리는 방법을 찾아야 합니다.

마크다운 미리보기

사용자 지정markdown.css이 필요하며 이 파일은 C:\Users\Kunal Tanwar\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\markdown-language-features\media 안에 있습니다.

기본 코드를 이 업데이트된 코드로 바꿉니다.

html, body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", system-ui, "Ubuntu", "Droid Sans", sans-serif;
}

BAD THING - 각 업데이트 후 전체 프로세스를 다시 반복해야 합니다. (많다)

좋은 소식 - 다른 파일을 사용자 지정하지 않고도 동일한 결과를 얻을 수 있는 확장 프로그램을 만들고 있습니다.