カスタムフォントをcode-serverに適用

6269 ワード
vscode コードサーバ code-server テキストリンク
参考リンク:https://github.com/coder/code-server/issues/1374
カスタムフォントをcode-serverに適用する方法について説明します.
カスタムフォントは、Webフォントを使用して適用されます.
通常code-serverは多くの人が仮想マシンで使用しているので、私たちの奮闘を基準に説明します.
  • ・workbench.html検索し、<head>ラベルに次のコードを追加します.
    • <style>
	@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap');
</style>
    他のフォントを使用したい場合は、他のフォントのurlを適切に使用できます.workbench.html銀4.1.xバージョンでは/usr/lib/code-server/vendor/modules/code-oss-dev/out/vs/code/browser/workbench/workbench.html,4.2です.xバージョンでは/usr/lib/code-server/lib/vscode/out/vs/code/browser/workbench/workbench.htmlしたがってbashコードを使用して自動化することもできます.
  • 4.1.xバージョン
    • sudo sed -i "s%</head>%<style>@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding\&display=swap');</style></head>%g" /usr/lib/code-server/vendor/modules/code-oss-dev/out/vs/code/browser/workbench/workbench.html
  • 4.2.xバージョン
    • sudo sed -i "s%</head>%<style>@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding\&display=swap');</style></head>%g" /usr/lib/code-server/lib/vscode/out/vs/code/browser/workbench/workbench.html
    ただし、code-serverを更新するたびにフォルダとファイルの場所が変わります.
    そのため、アップグレードのたびにファイルをタイムリーに見つけるのが難しい場合は、次のコマンドを使用します.
    cd /usr/lib/code-server #code-server folder 위치

find . -name workbench.html | sudo xargs sed -i "s%</head>%<style>@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding\&display=swap');</style></head>%g"
    ただし、workbench.htmlのファイル名を変更すると、正常に動作しない可能性があります.
  • そして、CSPを更新する.
    • 次のコードを実行すればいいです.
    cd /usr/lib/code-server

grep -rl "style-src 'self' 'unsafe-inline'" . | sudo xargs sed -i "s/style-src 'self' 'unsafe-inline'/style-src 'self' 'unsafe-inline' fonts.googleapis.com/g"
grep -rl "font-src 'self' blob:" . | sudo xargs sed -i "s/font-src 'self' blob:/font-src 'self' blob: fonts.gstatic.com/g"

  • code-serverを再実行します.

  • vscode設定に入り、フォントを設定します.'Nanum Gothic Coding', monospace

  • 終わりだ!
    • 以上の手順で、以下のようにファイルを作成します.
    cd /usr/lib/code-server #code-server folder 위치

find . -name workbench.html | sudo xargs sed -i "s%</head>%<style>@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding\&display=swap');</style></head>%g"

grep -rl "style-src 'self' 'unsafe-inline'" . | sudo xargs sed -i "s/style-src 'self' 'unsafe-inline'/style-src 'self' 'unsafe-inline' fonts.googleapis.com/g"
grep -rl "font-src 'self' blob:" . | sudo xargs sed -i "s/font-src 'self' blob:/font-src 'self' blob: fonts.gstatic.com/g"

# 이후 code-server 재실행
# 이후 설정의 글꼴 부분에 'Nanum Gothic Coding', monospace 추가
    CSS実践テクニック
    ホテルルーム料金プログラム(C言語)