code-server美化之添加自定义字体(JetBrains Mono)

## 实现原理

我们可以通过CSS注入来使得浏览器加载需要的字体文件, 以JetBrains Mono为例

## 详细步骤

### 准备字体文件

从[JetBrains Mono官网](https://www.jetbrains.com/lp/mono/)下载字体文件，并把woff和woff2格式的字体文件放置在fonts目录，并把fonts目录移到code-server安装路径下的 `lib/vscode/out/vs/code/browser/workbench` 位置。

以下是目录树

```
/usr/lib/code-server/lib/vscode/out/vs/code/browser/workbench
├── fonts
│   ├── JetBrainsMono-Bold-Italic.woff
│   ├── JetBrainsMono-Bold-Italic.woff2
│   ├── JetBrainsMono-Bold.woff
│   ├── JetBrainsMono-Bold.woff2
│   ├── JetBrainsMono-ExtraBold-Italic.woff
│   ├── JetBrainsMono-ExtraBold-Italic.woff2
│   ├── JetBrainsMono-ExtraBold.woff
│   ├── JetBrainsMono-ExtraBold.woff2
│   ├── JetBrainsMono-Italic.woff
│   ├── JetBrainsMono-Italic.woff2
│   ├── JetBrainsMono-Medium-Italic.woff
│   ├── JetBrainsMono-Medium-Italic.woff2
│   ├── JetBrainsMono-Medium.woff
│   ├── JetBrainsMono-Medium.woff2
│   ├── JetBrainsMono-Regular.woff
│   └── JetBrainsMono-Regular.woff2
```

### 创建css文件

新建一个 `fonts.css` 放在code-server安装路径下的 `lib/vscode/out/vs/code/browser/workbench` 位置

我的是 `/usr/lib/code-server/lib/vscode/out/vs/code/browser/workbench`

```css
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2'),
       url('fonts/JetBrainsMono-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Italic.woff2') format('woff2'),
       url('fonts/JetBrainsMono-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
}

/* 可根据需要添加更多字重和样式 */
/* 
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Medium.woff2') format('woff2'),
       url('fonts/JetBrainsMono-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Medium-Italic.woff2') format('woff2'),
       url('fonts/JetBrainsMono-Medium-Italic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Bold.woff2') format('woff2'),
       url('fonts/JetBrainsMono-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Bold-Italic.woff2') format('woff2'),
       url('fonts/JetBrainsMono-Bold-Italic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-ExtraBold.woff2') format('woff2'),
       url('fonts/JetBrainsMono-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-ExtraBold-Italic.woff2') format('woff2'),
       url('fonts/JetBrainsMono-ExtraBold-Italic.woff') format('woff');
  font-weight: 800;
  font-style: italic;
} */
```

### 修改 workbench.html

编辑工作台 HTML 文件，在 `<head>` 部分添加 CSS 引用：

```html
<link rel="stylesheet" href="{{WORKBENCH_WEB_BASE_URL}}/out/vs/code/browser/workbench/fonts.css">
```

### 最终目录结构

没有用到的字体可以不放

```
/usr/lib/code-server/lib/vscode/out/vs/code/browser/workbench
├── callback.html
├── fonts
│   ├── JetBrainsMono-Bold-Italic.woff
│   ├── JetBrainsMono-Bold-Italic.woff2
│   ├── JetBrainsMono-Bold.woff
│   ├── JetBrainsMono-Bold.woff2
│   ├── JetBrainsMono-ExtraBold-Italic.woff
│   ├── JetBrainsMono-ExtraBold-Italic.woff2
│   ├── JetBrainsMono-ExtraBold.woff
│   ├── JetBrainsMono-ExtraBold.woff2
│   ├── JetBrainsMono-Italic.woff
│   ├── JetBrainsMono-Italic.woff2
│   ├── JetBrainsMono-Medium-Italic.woff
│   ├── JetBrainsMono-Medium-Italic.woff2
│   ├── JetBrainsMono-Medium.woff
│   ├── JetBrainsMono-Medium.woff2
│   ├── JetBrainsMono-Regular.woff
│   └── JetBrainsMono-Regular.woff2
├── fonts.css
├── workbench.css
├── workbench.html
├── workbench.js
└── workbench.js.map
```

### 设置编辑器字体

修改setting.json的相关内容

```json
{
    "editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New'",
    "editor.fontLigatures": true, //对于连字字体，一定要打开连字符功能
}
```

**注意:** 对于连字字体，一定要打开`fontLigatures` 否则会出现光标错位问题

![image.png](https://www.guwolf.com/usr/uploads/2025/07/771752419.png)

此时，我的光标所在位置应该是行末

## 最后效果

![image.png](https://www.guwolf.com/usr/uploads/2025/07/557342743.png)

## 实现原理

我们可以通过CSS注入来使得浏览器加载需要的字体文件, 以JetBrains Mono为例

## 详细步骤

### 准备字体文件

以下是目录树

### 创建css文件

新建一个 `fonts.css` 放在code-server安装路径下的 `lib/vscode/out/vs/code/browser/workbench` 位置

我的是 `/usr/lib/code-server/lib/vscode/out/vs/code/browser/workbench`

### 修改 workbench.html

编辑工作台 HTML 文件，在 `<head>` 部分添加 CSS 引用：

```html
<link rel="stylesheet" href="{{WORKBENCH_WEB_BASE_URL}}/out/vs/code/browser/workbench/fonts.css">
```

### 最终目录结构

没有用到的字体可以不放

### 设置编辑器字体

修改setting.json的相关内容

```json
{
    "editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New'",
    "editor.fontLigatures": true, //对于连字字体，一定要打开连字符功能
}
```

**注意:** 对于连字字体，一定要打开`fontLigatures` 否则会出现光标错位问题

![image.png](https://www.guwolf.com/usr/uploads/2025/07/771752419.png)

此时，我的光标所在位置应该是行末

## 最后效果

![image.png](https://www.guwolf.com/usr/uploads/2025/07/557342743.png)

最后修改：2025 年 11 月 29 日

如果觉得我的文章对你有用，请随意赞赏

code-server美化之添加自定义字体(JetBrains Mono)

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

树莓派3B+搭建openwrt/lede软路由之编译固件篇

NoKVM折腾记-安装主控

树莓派3B+搭建openwrt/lede软路由之开始使用篇

Nginx防御cc-禁止特定UA访问

一个鸽了很久的ddns面板（也免费提供ddns服务）

基础算法-二分查找篇

xz_spider 一个用Python写的简单写真爬虫

Hello World！(有关于博客涅槃重生的感言)

讨论下Python多线程(Threading)和多进程(Multithreading)

2024 ZSC新生赛题解

code-server美化之添加自定义字体(JetBrains Mono)

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

code-server美化之添加自定义字体(JetBrains Mono)

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款